I am just learning this and would like some help please. The position: relative, does this mean that the div layer is positioned 50px down from the bottom of the layer above I have this

</div> (end of last layer)

<div style="position: relative; top: 50px; width: auto; height: auto; z-index: auto">

One after another on a page and would like them to be relative in spacing between each layer if you know what I mean but it does not work when i look at the webpage the spacing between some look ok and others don't.
I have messed about and I think nedd to increase by 50 each time like 50, 100, 150, etc... is this from the first div or can I make it relative to the layer before.

"z-index: auto" is superfluous as this is the default for elements.

position:relative means that the element will be moved relative to what it's normal (static) position would be which may or may not be where you think it will be.

By the sound of what you are trying to acheive, using margins rather than positioning would be more appropriate.

Originally Posted by chrishirst

"z-index: auto" is superfluous as this is the default for elements.

position:relative means that the element will be moved relative to what it's normal (static) position would be which may or may not be where you think it will be.

By the sound of what you are trying to acheive, using margins rather than positioning would be more appropriate.

Don't get what you mean by what it's normal (static) position would be. Can't see what this means other than wher I put the layer in the first place so why have a relative command?

When an element has a position of relative, then its top, left, bottom, or right properties are adjusted, it fills the same space as it would have normally, but its actual appearance is offset, the place where it would have appeared being empty.

A more common use of position:relative is allowing absolutely positioned elements to be positioned relative to it. Also, in order to have a z-index, an element must some sort of positioning, either relative, absolute, or fixed. This is sometimes a reason to throw in a position:relative, even if no other properties are needed, since relative positioning doesn't remove an element from the "flow" of the document.

the static position is where the element would be in the normal document flow.

You probably don't need any positioning at all, not many layouts actually do. It is purely inexperience and/or a lack of knowledge (or using a WYSIWYG layout tool) that leads developers into having positioning applied to every element.

Thanks guys sorry to be a pain but you have been really helpfull. Starting to get it now and making progress.

The positioning depends on whether or not there are other positioned elements as the element will be positioned relative to it's nearest positioned ancestor. If there is no positioned ancestor, then the element with positioning will be relative to the BODY.

You might want to check out this positioning tutorial:
http://www.barelyfitz.com/screencast...s/positioning/

You guys are brill I have taken it all on board and made some good changes to my site. The only prblem is I have neglected my content on my site and I'm now racing to re-publish it with all my changes. The info you have provided has made a big difference and its helped me clean up my html code also as I don't think I needed a lot of the position commands.

Thanks Again and Happy New Year. Will stick a final post up in next couple of days when my sig link points to my new design.