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
Overlapping Elements with Z-Index using CSS
Using CSS Z-Index property, a user can stack elements onto one another. Z-Index can have a positive or a negative value. The stack order of an element is set using the z-index property.
NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document.
Syntax
The following is the syntax of the z-index property −
Selector {
z-index: /*value*/
}
The value can be the following −
auto − The stack order is et equal to the parents
number − Set the stack order of an element in numbers
Overlapping elements with a negative z-index value
Let’s see an example of the z-index property. We have set a negative z-index value;
div:first-child {
background-color: orange;
width: 270px;
height: 120px;
z-index: -2;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div {
margin: auto;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
}
div:first-child {
background-color: orange;
width: 270px;
height: 120px;
z-index: -2;
}
div:last-child {
width: 250px;
height: 100px;
z-index: -1;
background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<p>Fortran was originally developed by a team at IBM in 1957 for scientific calculations...................</p>
<div></div>
</body>
</html>
Overlapping elements with a positive z-index value
Let us see another example of the z-index property. We have set a positive z-index value. And displayed a popup on button click −
.popUp {
text-align: center;
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
Example
Let’s see another example of the z-index property −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.popUp {
text-align: center;
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.popupContent {
font-size: 20px;
font-weight: bold;
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: rgb(255, 65, 65);
float: right;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #ff1010;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Popup Example</h1>
<button class="openPopUp">Open Popup</button>
<h2>Click on the above button to open the popup</h2>
<div class="popUp">
<div class="popupContent">
<span class="close">×</span>
<p>Sample text inside popup</p>
</div>
</div>
<script>
var popUp = document.querySelector(".popUp");
var btn = document.querySelector(".openPopUp");
var span = document.querySelector(".close");
btn.addEventListener("click", () => {
popUp.style.display = "block";
});
span.addEventListener("click", () => {
popUp.style.display = "none";
});
window.onclick = function(event) {
if (event.target == popUp) {
popUp.style.display = "none";
}
};
</script>
</body>
</html>
9K+ Views
