so what the hell is a z-index when it’s at home?

 
The z-index is a CSS property that refers to how elements are stacked on top of one another, simply it is where they are in the pile. Technically speaking it’s derived from what would be the z-axis on a graph standard graph. The z-axis is what takes you from a 2D ‘x’ and ‘y’ axes, to the third dimension. Okay, that sounded way more exciting and complex than it is…

So the higher the z-index is the closer the layer is to your eyeballs (or the top of the stack of elements sitting on top of one another, however you’d like to think about it). You can even set negative z-indexes if you’d like to push something further back.

(N.B: In order to set your z-index you must set the element’s position to either ‘relative’, ‘absolute’ or ‘fixed’.)

For example:

1
2
3
4
5
6
7
8
9
10

#bottomlayer {
position: relative;
z-index: 3;
}
</code>

<code>#toplayer {
position: relative;
z-index: 10;
}

Provided the two elements are in the same place with regards to their x,y co-ordinates (they may need to be floated above one another), the element with the ID ‘toplayer’ will sit on top of ‘bottomlayer’.

(Apparently the maximum z-index in most browser is 2147483647! I would stick to smaller numbers as they is nothing more annoying than maxing out your z-index and having to go back and change them all. A good tip is to use them in hundreds then you’ve got plenty of numbers in between in case you need them!)

so what’s wrong with coding z-indexes?

 
The trouble is while everything seems fairly straightforward in theory, when you have a truck load of elements all lying on top of one another on a page, you can sometimes get lost as to what is covering what. The old Firefox or Google Chrome inspectors aren’t particularly helpful because if one element is being covered by another, you’re inevitably only be able to inspect the top element because it’s in the way (Adobe Photoshop users that have been irritated by the ‘Auto-Select’ function may be able to relate to this!).

So the clever people down at Mozilla have created a slick solution to this pesky problem. Also known as ‘Tilt’ this amazing feature allows users to see a fully rotatable, 3D render of the page; which is interactive insofar as elements can be selected with a single click! You can now flip your page on its side and visualise exactly how the elements are stacked on top of one another, which definitely beats looking at a bunch of numbers . Moreover, the interface is lightning quick and feels totally seamless; plus it looks ridiculously sick.

how to access Firefox 3D View

 
It’s nice and easy…. Make sure you have the latest version of Firefox installed, right click an element you’d like to inspect on a web page and hit ‘Inspect’.

(Or alternatively, go to the Firefox drop down in the top left > Web Developer > Inspect… or hit ‘Ctrl+Shift+i’)…

Then click the button labelled ‘3D View’ on the bottom right and away you go!…

final thoughts…

 
Good job Mozilla. It’s made our lives a little bit easier.

If you’re having trouble with your z-indexes and would like a brand spanking new fresh site, we may be able to help you…

Check out our work and get in touch with us today!