View Full Version : positioning types

05-02-2006, 10:42 PM
Hey everyone,

I'm just looking for some clear cut definitions for positioning types: absolute, relative, static, inherit. One of the main reasons I want to figure this out is because I find it very convenient to use z-indexing w/ some layouts, however it's come to my attention that positioning needs to be declared for an elements z-indexing to work.

So I guess my question is two fold: 1, what are the definitions for the different types of positioning, i'm astonished that w3schools' site doesn't have any definitive reference to this. My second question would then be what is required for z-indexing to take place.

Thank you in advance,

05-02-2006, 11:13 PM
position: relative; positions the element relative to its usual position. E.g. use bottom: 10px; to move it 10px towards the top.
position: absolute; positions the element relative to its parent element if that one is positioned relative. If it's not it will position it relative to the <html> element (=the browser window). Rather complicated to explain. :)
That means if a div is positioned relative and top: 20px; the absolutely positioned div inside the first one will use the top left corner of the parent as starting point for any positioning, hence it will start from 20px.
If you apply left: 30px; to the inner div it will be moved 30px to the left and stand at 20px from top that the outer div was already moved. Same goes for the bottom. If the outer div is 20px high and the inner div has bottom: 0; it will stick to the bottom of the outer element and move down if you increase the size of the outer div.
position: static; is the default value. You only need that if you wanna revert any other positioning from an element if you specified differently before.
And you use position: inherit; if you want to inherit a specific kind of positioning from a rule directly before that one in the CSS.

z-index only works on relative and absolute positionings. The higher the value the more the element is "on top".

I hope I could explain it clearly enough. :)

05-02-2006, 11:13 PM
absolute positioning is absolute; it overrides the objects positioning with regards to everything else on the page and allows you to set the object's distance relative to the browser window with the top, right, bottom, and left CSS properties. It essentially becomes independent of its surroundings. Note that the element will be in its default position from the start though until you actually set the four mentioned positioning properties .

relative positioning sets the object's position relative to its default location on the page. The top, right, bottom, and left properties alter the object's position relative to this original location.

inherit, the default positioning, makes elements inherit the positioning of their parent element. So if you have an image in an absolutely positioned box, that image would inherit the absolute positioning and move with it.

static is the seemingly true default positioning since if no positioning is set, all elements inherit a position of static. The positioning properties don't have any effect on a static element.

fixed prevents an element from moving even if you scroll, for example.

Here's an explanation I found on positioning: http://www.quirksmode.org/css/position.html

All elements have a default z-index value of zero. Elements with a higher index will overlap those with a lower index. The exception seems to be negative z-indices since Mozilla (e.g., Firefox) handles them in a peculiar way; see this explanation (http://archivist.incutio.com/viewlist/css-discuss/5061) for details on that.

edit: *shakes fist at VIPStephan* :p

05-02-2006, 11:20 PM
:D I typed like devil was behind me. :D
But I like your explanation - sounds more sorted. And I forgot about fixed. :o

05-03-2006, 08:35 AM
Looks like you guys have just about everything covered; I just like to add that with relative positioning, the area on the page that would have been occupied by the positioned element is maintained and the rest of the content flows accordingly, while an absolutely positioned element is taken out of the normal flow completely: the remaining content flows as if it never were there.


position: absolute; positions the element relative to its parent element if that one is positioned relative. Relative or absolute, actually, but relative is very popular to turn an element into a positioning parent because it can be applied without further consequence for the reason mentioned above.

If anyone is interested in the finer details of the visual formatting model: they can be found here (http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html#positioning-scheme) (especially the bit about stack levels and z-indexing is... compelling... *yawn*).

05-03-2006, 11:25 PM
i wna basically learn whether or not i am going to sacrifice document flow if i were to z-index a few elements, (i say a few because you'd have to have 2 elements z-indexed in order for them to display as one would desire.)

let's say i have 3 boxes. 1 box will be the viewport, the other 2 will be rectangles, one horizontally opposed, one vertically opposed. I want the Viewport box to contain txt and be the lower-most element. I want the width-long rectangle to be the header at the top, and i want the height-long rectangle to be slightly overlapping the header box at the top, but i want the txt w/in the viewport to be pushed accordingly w/ let's say a 1em margin clearing the txt from the other 2 boxes.

The reason this is very important to me is because my job for the next 2 months is to create next to 2000 design templates for a single html file; thus i need to figure out a lot of css quirks and all that jazz.

so by token of what i've learned via these posts, i can basically issue a value of "relative" or "auto" to a z-indexed element and hope that it doesnt hurt document flow?

why can't there be some sort of grouping selector for css that lets you combine several divs and say that you want 1em margin. lol...

05-04-2006, 09:17 AM
The good folks at the W3C are working on that for CSS 3... ;)