Back to the article

A
position: static
z-index: not set
a
position: static
z-index: not set
B
position: static
z-index: not set
b
position: static
z-index: not set
C
position: static
z-index: not set
c
position: static
z-index: not set
ez-css Putting the 'less' in table-less layouts.

How z-index works! This page is to demonstrate how elements stack.

How to use it

Note: this tool does not rely on color alone as the sequence of the fieldsets matches the sequence of the six boxes in the source code, so 1st fieldset is to style box "A", second fieldset is to style box "b", and so on... Also, foreground and background colour combinations should provide sufficient contrast. Please let me know if you have trouble using this tool because of the color scheme I am using.

position:
position:

position:
position:

position:
position:

Set and reset

Things to keep in mind:

Markup

This only shows the markup relevant to the "construct" of these six boxes:


<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>
<div id="C">C<div id="c">c</div></div>

CSS

This only shows the styles relevant to the "layout" of these boxes. Note that a negative margin is set to show the natural stacking order of the boxes; but this can be removed using the "Remove negative margin" link above (see "Set and reset").


#A,#B,#C {
  height:14em;
  width:15em;
  margin-top:-80px
}
#a,#b,#c {
  height:6em;
  width:11em
  margin:1em auto;
}

Hint

Using Firebug, you can monitor in real time how these elements get styled.

This work is licensed under a Creative Commons License

Creative Commons License.