ADVERTISEMENT

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

Telegram Group Join Now

ADVERTISEMENT

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

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

 

ADVERTISEMENT

ADVERTISEMENT

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!

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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:

ADVERTISEMENT

5+ HTML CSS Projects With Source Code

ADVERTISEMENT

 

ADVERTISEMENT

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.

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.

Now I know you may get confused there so let me show you the output for z-index: 0 first.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

 

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

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT