In this lesson, we are going to work with the z-index CSS property. The first thing to note is that the z-index will only work on positioned elements. i.e. POSITION: ABSOLUTE, POSITION: FIXED, POSITION: RELATIVE. Z-index allows us to specify the stacking order of our positioned elements. An element with a higher z-index will always be positioned in front of an element with a lower z-index. For example, an element with a z-index of 2 will be positioned in front of an element with a z-index of 1. Negative numbers can also be used. -1 is greater that -2 as it is closer to 0 (default), and will be displayed in front. Let’s begin working with an example. First, we’ll create some stacked colored div boxes using absolute positioning. See example 1 below.
index.html Example 1
my-styles.css Example 1
Displayed Page Example 1
In our index.html document, we created 3 divs in the same way that we have been for the past few lessons. They all have a class with a name referring to the background-color we will add in our CSS code. This time, I’ve added some text to make the lesson clearer. Jumping over to the my-styles.css EXTERNAL STYLE SHEET, we have three class rules. They are set up in a similar way to what we have been doing up to this point. A background color, white font, 200 pixel by 200 pixel size, absolute positioning, and top-left coordinates for each. The coordinates for each CSS class rule are slightly different to make each div display a little bit up and to the left.
The first thing that you should notice in our Displayed Page Example 1 is that our gray (third div element in our index.html document is displayed on top of the red div which is on top of the black div. This is because our code is read from top to bottom, and gets rendered and displayed in that order. Basically, by default, our black div was read, positioned, and displayed first; followed by the red div, and finally the gray div. Let’s add some z-index properties to our CSS rules now to create a different stacking order. See example 2 below.
my-styles.css Example 2
Displayed Page Example 2
We have now added a z-index declaration to each of our CSS class rules. The ordering or numbering is really up to you. Normally numbers of 1, 2, 3, or -1, -2, -3 would be used, but I wanted to show you that 10, 7, and 2 will also work. The important part is how high the values of the number are. The element with the biggest number will display on top of the other elements. So, in our my-styles.css document, we have z-index: 10; in the .black rule, z-index: 7; in the .red rule, and finally, z-index: 2; in the .gray rule. In our Displayed Page Example 2, we have reversed the order in which our div boxes display.
That wraps up this quick lesson on the z-index property in CSS. Thanks for reading, I’ll see you next lesson.
index.html Source Code
<title>The Z-index Property</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
<div class="black">Don't forget about me!</div>
<div class="red">Not any more!</div>
<div class="gray">I'm in front!</div>
my-styles.css Source Code
Clear Coded Programming