z-index playground
Oops! Drag and drop features have not been implemented for your device.
What to do with these boxes?
- The six colored boxes (A, a, B, b, C, c) are "draggable", which means you can use your mouse to position them anywhere in the page.
- The input elements in the colored fieldsets let you set
z-indexandpositionvalues 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. - Use Firebug to monitor in real time how these elements get styled.
To reset everything, click on the title above (do not use the browser's "refresh" button as that would not reset all values).
Things to keep in mind
- The
z-indexvalue is set once the input field loses focus or when you press 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". - Dragging a box makes its position relative (note that the relevant radio button is "checked" only after that box is "dropped").
- The "set" and "reset" links above allow you to remove the negative margin applied by default to box A, B, C and also let you revert the document to its original state.
Markup of these 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>
