Every element on a web page is made up of a block of pixels. If it does not display:block by default you can set it to. Some elements by default are set to display:inline (like a span tag). You can set a width and a height for elements, but the difference is that in line elements want to flow horizontally. Here is how you can control the position of these blocks of pixels.
Static: the default position of where that element naturally wants to flow in a document. It is rare that you would set this. You CAN NOT SET A Z_INDEX OF STATIC ELEMENTS. By default the elements will stack up in the order they appear in the source code.
Relative means relative to where it would be in the natural flow of the document. If you set position:relative but do not give it a relationship to top/bottom/left/right, you will not see any change. If you give it a position such as top:20px;left:10px it will shift it’s position 20 pixels down from where it would normally be. The space where it is supposed to be remains a blank space. The other elements proceed as if it is still there.
This is great when you want to offset something without changing the flow. It does however appear on top of elements and gives you the ability to set a z-index which you can not set for static elements.
Another very important advantage to setting position as relative: If you set a "parent block" with the property{position:relative} even if you do not change the other properties, it now constrains any absolute positioned child elements to be absolutely positioned WITHIN the parent block instead of the containing HTML element.
Meaning you wont have the child element using the outer wrap of the website (or the whole screen of your browser) as the container to position off of. A child element can be positioned absolutely within a relatively positioned parent block.
Positioning an element absolutely allows you to exactly postion an element using top,bottom,left,right ({position:absolute;top:10px;left:50px;})
and the element will position itself to any parent element that has a position of relative or absolute.
If there is no containing block other than static ones it will default to using the HTML element, meaning the whole page.
An absolutely positioned element is removed from the flow of the page and is not affected by any other elements on the page and a z-index can be set.
The major difference between absolute and relative is that a relative element is positioned from its default place, leaving a "place holder" of blank space, and an absolute element is positioned off of the sides of a parent block and is removed completely from its default space leaving no "placeholder" space behind. The other elements will act as if it does not exist.
If you set an element with a position of absolute and do not set any other properties, the element will stay in its default "flow" position as if that was the set property, but because it is actually out of the flow of the document any parent block will act as if it does not exist.
If a containing block with a position of relative contains all absolute children, it will behave as if it is empty.
Fixed position works just like absolute except that it always positions off of the viewport (the containing HTML element is always the parent block)
AND it does not move when you scroll.
If you position an element 50px from the top using absolute positioning, you can scroll a long page and the element will remain 50pixels from the top of it's parent block and will scroll out of site.
If you position an element 50pixels from the top using fixed positioning, it will remain 50pixels from the top of your view port (the browser screen) and will be visible even if you scroll.
Like absolute positioning, with fixed positioning if you do not set any other properties it will stay in the position it would normally be in, but the other elements will not know it is there, and when you scroll it will not move.
One more thing about fixed positioned elements, they will print on every page of your site unless you use "media types" to display the fixed elements differently for print.
Web pages have a left / right axis (x) and a top / bottom axis (y). Both start at the upper left corner of the containing block. (0,0). The z-index refers to the z axis which is the stacking order of elements from the viewer through the page elements to the view port (browser window). See Image
The higher the z-index number is, the closer the element is to the viewer.
Any element that has a position set (except for static which is the default) is on a higher z-index plane than non-positioned or static elements, and will be layered according the order in which it appears in the source code unless a z-index is specifically set for that element.
The default stacking order without z-indexes set is as follows from viewer to screen (each element is stacked within its section in order of apearance in the source code):
9) VIEWER
8) Positioned elements
7) Inline elements
6) Floating elements
5) Static block elements
4) Root element borders
3) Root element background-image
2) Root element background-color
1) SCREEN
If you add z-indexes you now have the opportunity to stack positioned elements according to their z-index number (higher number is closest to the viewer), and you can put a positioned element with a negative z-index under a static block element making the list look like this:
10) Positioned elements in order of their positive index numbers
9) Positioned elements
8) Inline elements
7) Floating elements
6) Static block elements
5) Positioned elements in order of their negative z-index numbers
4) Root element borders
3) Root element background-image
2) Root element background-color
1) SCREEN
If a positioned parent contains stacked elements, the stacking order compared to another positioned parent with stacked elements, is only as high as the parents' z-index. (see image)
Click here for some practice code