Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Overlapping Elements with z-index Using CSS
Overlapping elements with z-index using CSS, we will be understanding about two different ways to handle overlapping which are by using positive and negative z-index value. CSS z-index property allows user to stack elements onto one another.
In this article, we are haveing three div boxes each with different colors, our task is to perform overlapping elements with z-index using CSS.
Methods for Overlapping Elements with z-index
We will be using folowing two methods which are mentioned below for overlapping elements with z-index using CSS:
Overlapping with Positive z-index Value
To handle overlapping elements with z-index using CSS, we will be using positive value of CSS z-index property.
- We have created three div boxes with different colors to overlap with positive z-index value.
- We have used some common CSS properties for all three boxes which are CSS background-color, height, width and position property to set their color and dimension.
- At the end, we have used positive z-index property value to specify the order of div elements in the stack. Element with lower z-index is placed at the bottom for eg: green box having lower value is placed at the bottom of the stack.
Example
Here is an example implementing above mentioned steps to handle overlapping elements with z-index using CSS with positive value.
<!DOCTYPE html>
<html>
<head>
<title>
Overlapping Elements with z-index using CSS
</title>
<style>
.green {
background-color: #04af2f;
height: 200px;
width: 200px;
position: absolute;
z-index: 1;
}
.black {
background-color: black;
height: 200px;
width: 200px;
position: absolute;
z-index: 2;
top: 110px;
left: 5%;
}
.color {
background-color: rgb(212, 182, 239);
height: 200px;
width: 200px;
position: absolute;
z-index: 3;
top: 130px;
left: 10%;
}
div:hover{
z-index: 4;
}
</style>
</head>
<body>
<h3>
Overlapping Elements with z-index using CSS
</h3>
<p>
In this example, we have used <strong>positive
z-index</strong> value to overlap elements.
</p>
<div class="green"></div>
<div class="black"></div>
<div class="color"></div>
</body>
</html>
Overlapping with Negative z-index Value
To handle overlapping elements with z-index using CSS, we will be using negative value of CSS z-index property.
- We have created three div boxes with different colors to overlap with positive z-index value.
- We have used some common CSS properties for all three boxes which are CSS background-color, height, width and position property to set their color and dimension.
- At the end, we have used negative z-index property value to specify the order of div elements in the stack. Element with higher z-index is placed at the top for eg: green box having highest value is placed at the top of the stack.
Example
Here is an example implementing above mentioned steps to handle overlapping elements with z-index using CSS with negative value.
<!DOCTYPE html>
<html>
<head>
<title>
Overlapping Elements with z-index using CSS
</title>
<style>
.green {
background-color: #04af2f;
height: 200px;
width: 200px;
position: absolute;
z-index: -1;
}
.black {
background-color: black;
height: 200px;
width: 200px;
position: absolute;
z-index: -2;
top: 125px;
left: 5%;
}
.color {
background-color: rgb(212, 182, 239);
height: 200px;
width: 200px;
position: absolute;
z-index: -3;
top: 148px;
left: 8%;
}
</style>
</head>
<body>
<h3>
Overlapping Elements with z-index using CSS
</h3>
<p>
In this example, we have used <strong>negative
z-index</strong> value to overlap elements.
</p>
<div class="green"></div>
<div class="black"></div>
<div class="color"></div>
</body>
</html>
Conclusion
In this article, we undestood how to handle overlapping elements with z-index using CSS with positive and negative values. While using positive value green box was at the bottom of the stack having lowest value(1) and while using negative value green box was at the top having highest value(-1).
11K+ Views
