Static vs Relative vs Absolute vs Fixed Positioning

Static positioning:
is the default (no positioning).
Part of page flow.
Scrolls normally.
No position change.

Relative positioning:
Still part of page flow.
Scrolls normally.
Is usually moved from original position.
This div has been moved 12px from its default top and left positions.
(Notice how this div is indented from the left of the page, and how far down it is from the hr tag just above it. The 12px of relative positioning has created this effect.)
Absolute positioning:
This will scroll, but is out of page flow.
Is usually moved from original position.
This div has been set to 600px from the page's left, and 250px from the page's top (in this case, because this div is directly inside the page's body tag, from the body tag's top).

Absolute positioning is especially useful for A1!
Fixed positioning:
This will NOT scroll, and is out of flow.
Is usually moved from original position.
This div has been set to 220px from the browser window's left, and 250px from the browser window's top.

Fixed positioning is especially useful for A1!



CSS Positioning - Basic Intro:

Think of divs as flat boxes that you can contain things in and then move around on the page.

You can make divs act like rigid boxes to hold other elements by defining a div's width in pixels using CSS (give the div a unique id, for example, and then set its width within the CSS settings for that id).

"...[A]n element's box may be block-level... or inline.... This trait governs the initial layout of the web page: by default elements are displayed in the order that the (X)HTML flows from top to bottom...."

"There are four principle ways to position an element box: you can leave the box in the flow (the default, also called static), you can remove the box from the flow and specify its exact coordinates with respect to either its parent element (absolute) or the browser window (fixed), or you can more the box with respect to its default position in the flow (relative). In addition, if boxes overlap one another, you can specify the order in which they should do so (z-index)."
[We will try to start positioning in week 2, but will cover z-index in coming weeks. -Nadine]

(from page 171 of HTML, XHTML, and CSS, 6th Edition, Visual Quickstart Guide by Elisabeth Castro)


Basic Comment on Being In or Out of Page Flow:

If a div is in the flow of the page it means that the div will push elements below the div (tags, words and images following the div) further down the page normally or similar to normal. Also, a div in the flow of the page is itself pushed further down by preceding elements.
      - Static and Relative are both in page flow.

If a div is NOT in the flow of the page it means that the div's position on the screen will not affect or be affected by other elements, unless it happens to overlap them --in which case it might even end up hiding them underneath itself, for example. Conversely, the other elements may hide it underneath them. The order in which elements overlap or hide each other depends on the z-index, which we will cover in upcoming weeks.
      - Fixed and Absolute are both out of page flow.


Quick Summary of the 4 Kinds of Positioning:

Static - Static positioning is the default, it is what happens when you set no positioning. The element (the tag and its content) stays in normal page flow.

Relative - The element's box is still part of the page flow, and but its location is changed vertically and/or horizontally relative to its own normal position in page flow.

Being part of flow (being in page flow) means that an element will push later elements in flow further down, and be pushed further down by elements in flow that are before the current element.

Example of Relative CSS positioning:
.fromorig {position: relative;
	       top: 200px;}
	

Fixed - The element's box is removed from the normal page flow, and you can set exact vertical and horizontal position of the element relative to the browser window.
Additionally, the fixed element's contents will NOT scroll away like normal HTML page contents do, they will stay in their current position in the browser window.
Fixed positioning was not supported by IE until version 7.

Example of Fixed CSS positioning:
.nevermove {position: fixed;
	        top: 200px;
	        left: 200px;}

Absolute - The element's box is removed from the normal page flow, and you can set exact vertical and horizontal position of the absolute element relative to the element it is inside.
Additionally, the absolute element's contents will scroll vertically (and/or horizontally) like normal HTML page contents do.

Example of Absolute CSS positioning:
.moveit {position: absolute;
	     top: 200px;
	     left: 200px;}
	

A Comment on Positioning:

For the effects you need to explore for A1, you will likely find that Fixed and Absolute positioning become very useful.

However, because Static positioning is the default position setting that is applied to ALL tags and divs if you don't set their positioning to some other setting, it goes without saying that Static positioning is the easiest and most widespread position setting! You've been using it all along and you didn't even know (because you don't even have to explicitly set it using CSS for it to apply)!