What is Z-index property? |what is z-index in css
Hey friends, today I’ll on what is z-index property and how to use it. Before we dive in, i’ll introduce myself. I’m CodingPorium and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel at here or by searching for CodingPorium on YouTube for more!
What is z-index?
Z-index is a property that we can use in our CSS code in web development. Z-index is generally used for positioning a image or any item in your website. If we look into this topic even deeper, the supreme function of z-index to specify the stacking order of a HTML element.
Okay, now that you’ve got a general idea and definition of z-index, let’s see some examples with z-index, the code needed for z-index and also situations where you cannot use z-index. Let’s dive in!
Z-index Examples and Types
Now, i will be showing image examples of z-index usecases and then show the code for it below that. However, here’s a basic block of code that we are going to use throughout this tutorial. (Make sure to have a sample image for this tutorial and name it as img.png)
Okay, now let’s first see the auto value for z-index.
This is the default value for our z-index property. This sets the stacking order of our image in equal to its default position. Here’s how this would look like:
To obtain this desired output, we will need to add the following line of code in our CSS section in addition to the code I provided earlier.
That line of code you need to add is:
2. z-index : initial
Alternatively, you may also use the inherit value
You might wonder why these 2 properties exist if the function is same asz-index:auto . That’s because even though they have the same function for now, but later on we apply CSS positioning and other CSS properties, the inherit function can help more.
3. z-index: negative number
This is where our main game begins. For z-index, the number value is extremely useful for us. In this case, I’ll set z-index:-1 and the image will fall behind our text. This is because the stacking order is a negative number.
Here’s how it looks like:
Now, we will see what happens when we use a positive number instead in the next examples.
4. z-index: positive number
Okay, before we enter the technical aspects of this section, let’s discuss on the basic concept first. When we used a negative number earlier, the photo fell behind the text. Now if a positive number is the opposite of a negative number, then the output would be opposite too.
Now I know you may get confused there so let me show you the output for z-index: 0 first.
Okay, so as you see above, the reaction is opposite. The amount of objects our element stacks over depends on the value you set for your z-index. The higher the value of your z-index property, the higher the number of stacks.
Anyhow, here’s the code for the positive z-index type
Where can you use z-index?
z-index may seem cool and interesting to use with images or any other creative projects. However, you need to know where you CAN use z-index.
Z-index only functions on positioned elements. By this i mean the position CSS property (example: position:absolute , position:fixed , etc.). Besides that, they also function on flex items.
That’s all about z-index !