css Absolute

If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. Say I wanted a graphic to appear 46 pixels from the top of the page and 80 pixels in from the right, I could do it. The CSS code you’ll need to add into the image is

img {position: absolute ; top: 46px; right: 80px; } 

It is possible to have things overlapping with absolute positioning.

To get layers overlapping each other you need to use the z-index command. Add z-index: 1 in with the positioning code and this element will appear above everything without this command. If you want something else to go over this layer too, add z-index: 2 and so on. The higher the index, the closer the div will appear to the front of the page.

Put the layer that holds your page’s content at the top of your code. This is what readers want to see immediately. Your navigation and other presentational components can then load around this, allowing your reader to begin reading as soon as possible and making your navigation available when it is most likely to be used: after the page has been read.

Advantages of Absolute Positioning

* Full control over where elements are positioned on the page – much more control than is possible with tables.
* The order of the divs in the HTML source code doesn’t matter – once something is absolute positioned it is “pulled out of the flow” of the document, so it can be placed pretty much anywhere in that document. This allows you to have your content before your navigation structures, which is good for accessibility and good for search engine optimisation.

Disadvantages of Absolute Positioning

* Elements can end up overlapping if due care is not taken – especially when the user dramatically resizes the page.
* The footer problem. If you have a layout which uses absolute positioning for one of the columns, there is no way of creating a footer that spans the whole of the bottom of the page without risk of it being overlapped by the absolutely positioned column should that column be longer than the non-positioned column. The solution is either to ensure the static column has more content than the absolute positioned one, or to restrict the footer to taking up space at the bottom of the static column rather than spanning the whole page. See also Footer Beneath Sidebar