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.
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
