demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Stacking order and z-index

css / positioning

Estimated reading time: 2 minutes, 30 seconds

Absolute Positioning Example 3When 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:

<style>
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; }
</style>

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

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.