Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between auto, 0 and no z-index
The position of elements in a webpage is a crucial property for the developers to assign. If your elements are not properly placed, then it may be displayed as absurd or unorganized. So, it is important for the developers to assign the position of each HTML element wisely.
Sometimes, it may happen that the elements are overlapping despite their respective positions assigned. These overlapping elements may stack upon each other and may hide the other elements. To solve this issue, CSS offers z-index property for web designing. In this article, we will learn about z-index property of CSS. We will also discuss the different values of z-index as well as the difference between them.
What is z-index property?
The z-index property of CSS enables the developers to assign the order of elements which are overlapping on the z-axis that is, in or out of the screen. However, the z-index property only works on elements which have position value specified other than static.
The stack level of an HTML element is determined by the z-index property. The position of the element on the Z axis is referred to as the "stack level" (as opposed to the X axis or Y axis). The element will be placed nearer the top of the stacking order if the value is higher. This stacking arrangement is perpendicular to the viewport or display.
The natural stacking order of components on the Z axis in an HTML page is influenced by a variety of factors. These are Elements with negative stacking contexts, Non-positioned, non-floated, block-level elements, Non-positioned, floated elements, Inline elements, and Positioned elements, all in order of display.
Syntax
element{
z-index: values;
}
The following are the values for this property −
Auto - The order of overlapping is same as the value of the parent. This is the default value.
Number - The order of overlapping is assigned as numbers like 1, 2, 3, and so on.
Initial - The order is set to be as the default value.
Inherit - The order of overlapping is inherited by the parent element.
Example
<!DOCTYPE html>
<html>
<head>
<title>z-index property</title>
<style>
.demo1{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 100px;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: #FFFF00;
position: absolute;
top: 100px;
left: 300px;
z-index: 2;
width: 200px;
}
</style>
</head>
<body>
<center>
<h2> z-index property </h2>
<div class= "demo1"> This is an example. </div>
<div class= "demo2"> This is an example. </div>
</center>
</body>
</html>
Auto value of z-index property
The auto value of z-index property is the order of elements same as that of the parent element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Auto value of z-index property</title>
<style>
.demo1{
font-family: verdana,'cursive';
background-color: #FFFF00;
position: absolute;
top: 120px;
z-index: auto;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 200px;
z-index: auto;
}
</style>
</head>
<body>
<center>
<h2>z-index property</h2>
<p class= "demo1"> This is an example. </p>
<p class= "demo2"> This is an example. </p>
</center>
</body>
</html>
Zero value of z-index property
Zero value of z-index property is a number value for the order of elements. Specifying the z-index value as 0, creates a stacking content. For instance, if we have two elements element 1 and element 2, both have z-index as 1 and 0 respectively. So, element 1 will be stacked above element2. Whereas if they have z-index as -1 and 0 respectively, then the element 1 will be stacked below element 2. Consider the following example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Zero value of z-index property</title>
<style>
.demo1{
font-family: cursive, Cochin, Georgia;
background-color: #FF0000;
position: absolute;
top: 120px;
z-index: 0;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 100px;
left: 300px;
z-index: 0;
width: 200px;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h2>z-index property</h2>
<p class= "demo1">This is an example.</p>
<p class= "demo2">This is an example.</p>
</body>
</html>
No value for z-index property
No value for the z-index property is often same as the auto value.
Example
<!DOCTYPE html>
<html>
<head>
<title>No value for z-index property</title>
<style>
.demo{
font-family: cursive, Cochin, Georgia;
background-color: #FFFF00;
position: absolute;
top: 120px;
}
</style>
</head>
<body>
<h2>z-index property</h2>
<p class= "demo">This is an example.</p>
</body>
</html>
Conclusion
A challenging subject is stacking contexts in CSS. In this article, we have provided a thorough description of how stacking contexts on a web page are impacted by z-index which, when fully appreciated, transforms into a potent CSS property. Now that they are familiar with this characteristic, new developers should be able to use it effectively and steer clear of some of the frequent issues that can occur. Advanced developers should also be more aware of how the appropriate application of the z-index can solve a wide range of layout challenges and offer up a variety of creative CSS design options.
144 Views
