When elements are positioned absolutely on an HTML page they can overlap, not only with ordinary content, but also with other absolutely positioned elements. When that happens, how does the browser determine which elements go on top?
By default, the browser determines stacking of absolutely positioned elements by the order they appear in the code. The best analogy to help visualize this is dealing out a deck of cards. If the dealt cards do not overlap – like the face-up community cards in Texas Hold'em – then they are simply on top of the “playing surface”: all the normal body content having static, relative, and fixed positioning. If they overlap with other “cards” dealt earlier (i.e. absolutely-positioned elements earlier in the code), stacking will occur in the order they are dealt. In our earlier example, the images appeared in a certain order in the code, and so when they overlapped Aeschylus was on the bottom of the stack, Plato on top of that, and Alcibiades at the very top. The easiest way to “layer” elements with position: absolute is to change their order in the code. For example, altering our code to:
<div id="greek-figures">
<img src="plato-bust.jpg" alt="Plato" id="plato">
<img src="aeschylus-bust.jpg" alt="Aeschylus" id="aeschylus">
<img src="alcibiades-bust.jpg" alt="Alcibiades" id="alcibiades">
</div>Results in the screenshot you see to the right. The Plato image in the middle is now beneath the other images, as it comes first in the code. Each image remains in the same position, but has been “dealt” in a different order.
For various reasons, sometimes we can’t change the order of elements in the code (or don’t wish to) but we do want to stack elements in a different way than that determined by the order that they occur in the code. Returning to our original code:
<div id="greek-figures">
<img src="aeschylus-bust.jpg" alt="Aeschylus" id="aeschylus">
<img src="plato-bust.jpg" alt="Plato" id="plato">
<img src="alcibiades-bust.jpg" alt="Alcibiades" id="alcibiades">
</div>If we want to re-order the stack but don’t wish to alter the order of elements in the code, we can add z-index values to the CSS controlling the images:
body p {
text-align: justify;
}
div#greek-figures {
float: right;
width: 250px;
height: 450px;
margin-left: 2em;
}
div#greek-figures img {
height: 150px;
width: 150px;
position: absolute;
}
img#aeschylus {
z-index: 2;
}
img#plato {
top: 155px;
right: 15px;
z-index: 1;
}
img#alcibiades {
top: 290px;
z-index: 2;
}This would provide the same result as our first example, but without requiring any alteration to the order of HTML code.
The body is considered to be a z-index level of 0, and any positive z-indexed element will be above the <body> (think of moving individual cards within a stacked deck). z-index elements with a negative values will be below this: note that if the body has a background-color those elements will be hidden behind the body
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
