CSS Position Property
We are no longer forced to lay our sites in tables, now we have more control over the positions and dimension of web page elements. Table structures are not flexible and we can’t put the elements wherever we want.
There are four types of placing an element: in a static, relative, absolute or fixed position.
Static positioning
This property is default. An element with this property always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations). Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.
Relative Positioning
When you position something relatively, you are modifying its position from where it would have been if you hadn’t changed anything. An element with position: relative; moves an element relative to its normal position, so “left:10″ adds 10 pixels to the element’s LEFT position. This may sound strange, but it can be useful sometimes.
Absolute positioning
If you choose for an absolute positioning the element ( image, table, etc) will appear at the specified position. An absolutely positioned element is positioned relative to another element, called the containing block. For example if I want to position a graphic 50 pixels from the top and 100 pixels from right, I can do it this way:
img {position: absolute; top: 50px; right: 100px; }
Positioning Layers
Look at the bellow layer:
<div style="position: absolute; left: 600px; top: 100px; height: 400px; width: 200px; padding: 10px">Some text</div>
What I’ve done here? First I specified the position for the layer, then the dimensions. You are free to add how many characteristics you want. With layers, all the information that a browser needs is contained in the style attributes you’ve added.
To get layers overlapping each other you need to use the stacking order with z-index attribute. Add z-index: 1; in with the positioning code and this element will appear above everything without this command. The standard value is z-index:0 and a smaller value will have a lower priority than a higher one.
Fixed positioning
An element with position: fixed; is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Fixed positioning is very similar to absolute positioning, but there are differences. Unfortunately Internet Explorer doesn’t support fixed positioning.
2 Comments for “CSS Position Property”
Post a comment
RSS/XML
July 15th, 2008 at 10:27 am
css layer examples / properties and layer attributes
http://css-lessons.ucoz.com/css-layer-properties.htm
July 27th, 2008 at 10:58 pm
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out