Free Coding Ebook 👉 Get Now
What is Z-index Property In CSS? Learn Z-index With Example
Hey friends, today I’ll on what is z-index property and how to use it. we first understand what is z-index then do Html and Css code to understand the z-index property.
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 an image or any item on your website. If we look into this topic even deeper, the supreme function of the z-index specifies the stacking order of an HTML element.
ADVERTISEMENT
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!
50+ HTML, CSS & JavaScript Projects With Source Code
Z-index Examples and Types
Now, I will be showing image examples of z-index use cases 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 img.png)
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<img src="img.png" height="140">
</body>
</html>
Okay, now let’s first see the auto value for the z-index.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
1. z-index:auto;
This is the default value for our z-index property. This sets the stacking order of our image equal to its default position. Here’s what 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:
z-index:auto;
For this output,we will add the following value.
z-index:initial;
Alternatively, you may also use the inherit value.
z-index:inherit;
You might wonder why these 2 properties exist if the function is the same as z-index: auto: . That’s because even though they have the same function for now, later on, we apply CSS positioning and other CSS properties, and the inherit function can help more.
3. z-index: negative number
This is where our main game begins. For the 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 what it looks like:
5+ HTML CSS Projects With Source Code
TO achieve this output, add the following line code instead:
z-index: -1;
Now, we will see what happens when we use a positive number instead in the next examples.
ADVERTISEMENT
4. z-index: positive number
Okay, before we enter the technical aspects of this section, let’s discuss 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 the opposite too.
ADVERTISEMENT
Now I know you may get confused there so let me show you the output for z-index: 0 first.
ADVERTISEMENT
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
ADVERTISEMENT
Anyhow, here’s the code for the positive z-index type
z-index: 0;
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.
Create Responsive Navbar Using BootStrap
That’s all about z-index !
Thank You!
comment down below any doubts or suggestions you have. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!
Written by – Codingporium
