By default, the elements of a website line themselves up next to or under each other automatically. However, at times, the design requires them to overlap. When that happens, the stacking order becomes important, and the natural stacking order will need to be manipulated.
Without applying any CSS to the elements within the wrapper on the demo page here, this code:
<body> <div id="wrapper"> <img id="aqua" src="aqua.gif" alt="aqua square"> <img id="green" src="green.gif" alt="green square"> <h1>The z-index and CSS -- When the Stacking Order Matters</h1> <h2>All elements appear in their natural order as they are entered in the HTML</h2> </div> </body> |
creates a page that looks like this. As you see, there is no point worrying about stacking order, the elements aline themselves automatically.
However, when positioning is applied and they start overlapping, we can change their stacking order if we need to. When it comes to z-index and the stacking order, one must note the following:
- Z-index only works on relative or absolute positioned elements
- The default z-index is zero
Here, I have added an absolute position to the h1 and a relative position to the green box to move them up and down-and-left, respectively.
h1 { position: absolute; top: 100px; left: 100px; } #green { position: relative; top: 50px; left: -50px; } h2 {margin-top: 50px;} /*This is here to push the line below the green box */ |
That means that the aqua image, which does NOT have positioning applied, sits on the default level of zero. Adding any kind of z-index to the element is useless – it won’t budge because of the lacking positioning. But we can move the text and the box either under (with a negative z-index) or on top (with a positive z-index) the not-positioned, zero-level aqua box.
#green { position: relative; top: 50px; left: -50px; z-index: -2; } h1 { position: absolute; top: 100px; left: 100px; z-index: -1; } |
creates this page.