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:
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
z-index:initial;
Alternatively, you may also use the inherit value
z-index:inherit;
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:
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.
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!
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