What is Z-index property? |what is z-index in css

What is Z-index property? |what is z-index in css

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)


<!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 z-index.

1. z-index:auto;

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:

What is Z-index property? |what is z-index 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 same as our earlier one which is z-index:auto.  Even the z-index:inherit property also brings the same output too. Here's how it would look like:
What is Z-index property? |what is z-index 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 same as 
z-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:

What is Z-index property? |what is z-index 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 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.

What is Z-index property? |what is z-index in css

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


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.
That's all about z-index !

Thank You!

Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestion you have. Do subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!


Post a Comment

Previous Post Next Post