Resources
helping you along the way
Knowledge is the foundation of all wisdom...
Resources >> Web workshops >> Relative and Absolute CSS
Relative vs Absolute CSS Positioning
CSS relative positioning:
Divs (or any other element) can be positioned to an exact pixel screen position. You can position the DIV either 'relative' to whatever element the DIV happens to be sitting in or 'absolute' - which is explained further down the page.
The words: 'relative' and 'absolute' are
special keywords in CSS that are used to tell the browser how to position
elements. Elements can be DIVs or <p> tags
or any other tag in HTML.
Code:
<div id="Layer1" style="position:relative; background: rgb(204,204,255); left:10px;
top:34px; width:380px; height:27px; z-index:1">
Sample text.
</div>
Absolute Positioning
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.
