z-index
and position
values for each one of these six boxes. These fieldsets are color coded, which means a fieldset’s background color matches the background color of the box it is supposed to style. 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:relative
" fixes it.z-index
value is set once the input field loses focus or if the user presses the enter key while the caret is in that field, so you need to type some value and then TAB out of the box (or click outside of that box) for the new value to "kick-in".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>
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;
}
Using Firebug (web inspector, or else), you can monitor in real time how these elements get styled.