Position: relative; Stack Contexts, Stack Levels and HasLayout

#1 - simple control construct

div class="a" - This div is just for kicks, removing it does change things slightly, well it did until headings went into place ~ so I think is a collapsing margin side effect, but that's another story


all divs have background color and borders to make the overlap clearer

.a {margin: 20px;}

div class="b" - This div has been given a zero bottom margin to make the overlap clearer

.b {margin: 20px 20px 0 20px;}



div class="c" - This div will be the one to watch ~ for layout or position: relative


it has the negative top margin and zero bottom margin to show it's relationship to previous and following elements

.c {margin: -20px 80px 0 80px; background: #ffc;}



div class="d" - This is the following block with negative top margin again in order to show the stacking level reverts back

Spacing is controlled by <br> so padding and margins do not affect anything

.d {margin: -20px 50px 0 50px;}



What's happening here is what you would expect, the divs(block elements) are stacking by default according to their root element, the level in which they stack is according to their flow in the document tree because they have no positioning explicitly set.

div "c" stacks on top of div "b" and then div "d" on top of div "c"

In other words they are being formatted/stacking/layering according to their position in the stack level - and they are all taking part in the root's stacking context. [00]

IE7B2 seems nice and stable but IE6 does not like this at all, and this situation would possibly have been where we would have to use a "layout" or position: relative; fix to suit IE6. The following screenshot is of IE6 and shows typical symptoms of IE rendering errors, missing backgrounds and borders.

Fig.1: IE6 at default demo setting
Image 1 : IE6 showing missing border and backgrounds

Next lets change something >

  Glossary/References Next : Page 2

Claire (Suzy) Campbell «tanfa.co.uk» © 2003-2008