What is Z-index Property In CSS? Learn Z-index With Example

Free Coding Ebook šŸ‘‰ Get Now

What is Z-index Property In CSS? Learn Z-index With Example

Z-index Property In CSS
Z-index Property In CSS

Ā 

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:

Z-index Property In CSS

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;
2. Z-index : initial
The output for this value is the same as our earlier one which isĀ z-index: auto;Ā  Even theĀ z-index: inherit;Ā the property also brings the same output too. Hereā€™s what it would look like:

Ā 

Z-index Property In CSS
Z-index Property In CSS

Ā 

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

Ā 

Z-index Property In CSS
Z-index Property In CSS

Ā 

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

Z-index Property In CSS
Z-index Property In CSS
Okay, so as you see above, the reaction is the 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
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

Free Coding Ebook šŸ‘‰ Get Now

Leave a Reply