Today's tutorial will be how to use the z-index property in CSS. This property has baffled a lot of designers and developers, myself included, but it's very easy to use once you get used to it.
What is z-index?
Z-index is a CSS property that allows positioning of elements on top of each other. The z-index property only accepts numbers. Higher numbers will be on top. If you have overlapping items with margins or absolute positions, the lower level items will be on top. Z-index allows you to change the order of overlapping elements. This is familiar if you ever use Photoshop or any other program with layers.
There are a few rules to make the z-index work properly. The mistake most developers make when playing with this property is that they forget to set the position.
- The elements have to be set with a relative, absolute or fixed position.
- The elements have to be siblings.
Can an element override its parent?
Nope. The child will always be above its own parent. You're going to have to manipulate the DOM to make it work.
That's all for this tutorial. Hope this makes it easier to understand how this property works. It's pretty simple once you follow the two rules stated above.