Since you guys have been amazingly helpful with all my web design questions, please explain to me the "Z Index" as if I were less intelligent than a box of thumbtacks.

April 1, 2012 10:57 AM

Since you guys have been amazingly helpful with all my web design questions, please explain to me the "Z Index" as if I were less intelligent than a box of thumbtacks.

Seriously, you guys have been tremendously helpful with all of my web design queries and I am incredibly grateful. The tutorials I find online tend to cause my eyes to glaze over, but I always come away from these AskMe's feeling like i really grasp whatever it is Im asking about.

So then, the Z Index. Its to layer things? Or.....

posted by Senor Cardgage to computers & internet (13 answers total)

It pushed items out of the document flow, and into the third dimension. Yes, it makes items layerable.
posted by cmiller at 11:08 AM on April 1, 2012

It can be used for that. At its core, it determines the ordering from top (i.e. totally visible) to bottom for html elements that if laid out normally would occupy the same portion of the screen. The item with the greatest value of Z "wins" so to speak and gets to be the item on top.

<img src="alpha.jpg" style="position:absolute;left:0px;top:0px;z-index:20">
<img src="beta.jpg" style="position:absolute;left:0px;top:0px;z-index:10">

Notice in this example, alpha.jpg and beta.jpg would occupy the same screen real estate because they are absolutely positioned. The alpha.jpg image would be drawn on top of beta.jpg because alpha's z-index is higher.
posted by mmascolino at 11:10 AM on April 1, 2012

Yes, Z-index is for layering things. It specifies where an element lies within a "stack" of elements. Positive numbers mean an element rises to the top of a stack, negative numbers mean they drop down in the order of a stack. The default value is zero. So...

Element 1: z-index = -25
Element 2: z-index = 100
Element 3: z-index not set
Element 4: z-index = 10
Element 5: z-index = -10

results in the following order:

1. Element 2
2. Element 4
3. Element 3
4. Element 5
5. Element 1

If you wanted to make sure a particular element was always on top of everything else, you could set the z-index to something like 100. For example, this site (note: self-link) uses it to make sure the decorative border at the bottom stays on top, while the content slides up & down beneath it.
posted by jammy at 11:16 AM on April 1, 2012

Also important to note. You can only specify z-index on elements that have position: relative, absolute, or fixed.
posted by the jam at 11:53 AM on April 1, 2012 [1 favorite]

Remember middle and high school math and science classes, when the teacher would drag out the transparency machine, to help give lessons?

So picture a stack of transparencies laid one on top of the other on this machine, and what you see on the projector screen when you're sitting on class is the "web page".

In this metaphor, the z-index is an number (signed integer) that you assign to each transparency sheet, from the bottom to the top of the stack.

It doesn't really matter what the numbers are, so long as they increase (monotonically) from the bottom of the stack, all the way to the top. This tells the browser the order in which to layer things.

In other words, a set of z-indices for five div elements could either be {-10, 0, 10, 20, 100} or {-2, -1, 0, 1, 2} and the web browser will render them in the same order.
posted by Blazecock Pileon at 1:30 PM on April 1, 2012 [1 favorite]

Think of pieces of paper sitting on a desk. Some of them are cut into odd shapes. Many of them overlap. Where they overlap, you don't see both pieces. You just see the one on top, right?

That's what's going on in your web page, too. The Z Index is how you control what's on top.

Actually, those two overlapping pieces of paper on the desk might well both be visible if the one on top is partially transparent, for instance if it's made of tracing paper. And you can do that on your web page, too. The layer on top may not be totally opaque. Text objects, for example, are opaque where the letters are, but are transparent where the letters are not. So you can put a text object on top (higher Z index) of a picture, and the letters will appear in the image.

Get the Z index wrong, though, and the picture will be on top of the letters. Since the picture isn't transparent, you won't be able to see the letters.
posted by Chocolate Pickle at 1:32 PM on April 1, 2012

Seconding everyone here. Also it might be easier to think of z-index positions in terms of 'front' and 'back' as opposed to the 'top' and 'bottom' we normally use for vertical positions. Thus - the header is near the top of the page and the footer near the bottom, and the z-index:10 object is in front of the page while the z-index:-10 is behind it (at the back).
posted by fix at 2:00 PM on April 1, 2012

Check out Firefox's 3D dom inspector.
https://addons.mozilla.org/en-US/firefox/addon/tilt/
It will help you visualize what you're doing.

Note that layout and Z-order (if not specified) may differ between firefox and webkit (Chrome, Safari, BlackBerry), and opera based browsers.
posted by captaincrouton at 2:31 PM on April 1, 2012 [1 favorite]

Z-index is a used to set the relative position of an element in a stack. The numbers have no meaning on their own, but are important when compared to other elements.

I'm not 100% sure, but I think that f no z-index is set, it is treated as if it is set to 0. I also think that if two elements have the same index, the element that is later in the code is further to the front.
posted by dantodd at 2:53 PM on April 1, 2012

Pretend Z-index is like the altitude on a plane. Something with Z-index 9,000 is going to fly right over something with z-index 500. And it tends not to kick in unless you're positioning relatively or absolutely, as opposed to the regular page flow.
posted by steinsaltz at 2:59 PM on April 1, 2012 [1 favorite]

I'm not 100% sure, but I think that f no z-index is set, it is treated as if it is set to 0. I also think that if two elements have the same index, the element that is later in the code is further to the front.

this is correct...
posted by jammy at 4:45 PM on April 1, 2012

One useful Z-index function is that it can be changed dynamically with scripting. So you can have a popup hovering over the page when it is loaded, with Z index set to some high number, and clicking it will reset the Z index to a negative number to hide the popup. Alternately, you can reverse the setting to launch the popup window when a specific link is clicked - it's already there, but clicking resets the Z index to pop it to the top of the stack.

You see variations of this approach with things like those annoying "Wanna take a survey?" popups on some sites, and in the full-screen grayed out background you get when clicking video links on some pages. The advantage of the approach is that the popup isn't blocked by popup blockers in the browser, and (because it loads while the page is loading) to the end user, the popup appears instantly when the "show popup" link is clicked.
posted by caution live frogs at 8:40 AM on April 2, 2012

I think this image illustrates the concept pretty well (though I am a math person, so the Cartesian coordinate system may just be really natural to me). The larger the z-index, the farther to the right. This one shows how blocks with differing z-index values might actually render (and stack).
posted by ashirys at 11:45 AM on April 2, 2012