AtoZ CSS Quick Tip: Mastering Z-index

Z is for z-index

Predictably, the final tip in this CSS series is all about z-index.

As discussed in the original screencast all about z-index, it’s a property used to control the ordering of layers in the document. There are a few complexities around stacking context (also covered in the video) but by and large, z-index is fairly limited in features.

However, there are always details to dive into when in pursuit of sharpening your skills and becoming a master of your craft. Let’s have a look at a couple of tips for working with z-index.

z-index only works for positioned elements

If you want to control the stacking order of elements, you can do so with z-index. But z-index will only take affect if the element also has a position value of absolute, relative or fixed.

Placing elements precisely with position is great for building up complex layouts or interesting UI patterns but it’s common to want to control stacking order without moving the element from its original place on the page.

If this is the case, you can just set position:relative but not provide any values for top, right, bottom or left. The element will remain in its original place on the page, the document flow won’t be interrupted and z-index values will take affect.

You can have negative z-index

Layering elements is often done to build up complex shapes or UI components. This often means layering elements on top of each other, with ever-increasing values of z-index. To place an element on a layer below another one, it just has to have a lower value of z-index but that lower value can be negative.

Continue reading %AtoZ CSS Quick Tip: Mastering Z-index%

by Guy Routledge via SitePoint