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
Stacking Elements in Layers using z-index Property using CSS
Using CSS Z-Index property developer can stack elements onto one another. Z-Index can have a positive or a negative value.
NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document.
The following are some examples to implement the z-index property.
z-index
In this example, we have set a positive z-index value to stack −
Example
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: rgb(76, 78, 175);
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #4f3e8e;
}
.searchField {
box-sizing: border-box;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.searchField:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownList {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdownList a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h1>Search/filterText Dropdown Example</h1>
<div class="dropdown">
<button class="dropbtn" onclick="showDropList()">Dropdown</button>
<div id="myDropdown" class="dropdownList">
<input type="text" placeholder="Search.." class="searchField">
<a href="#">Cow</a>
<a href="#">Cat</a>
<a href="#">Dog</a>
<a href="#">Giraffe</a>
<a href="#">Lion</a>
<a href="#">Leopard</a>
<a href="#">Cheetah</a>
</div>
</div>
<script>
function showDropList(){
let dropDiv = document.querySelector('.dropdownList');
if(dropDiv.style.display==="block"){
dropDiv.style.display = "";
} else {
dropDiv.style.display = "block";
}
}
document.querySelector('.searchField').addEventListener('keyup',filterDropdown);
function filterDropdown() {
var inputSearch, filterText, ul, li, links, i,div;
inputSearch = document.querySelector(".searchField");
filterText = inputSearch.value.toUpperCase();
div = document.getElementById("myDropdown");
links = div.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
txtValue = links[i].textContent || links[i].innerText;
if (txtValue.toUpperCase().indexOf(filterText) > -1) {
links[i].style.display = "";
} else {
links[i].style.display = "none";
}
}
}
</script>
</body>
</html>
Negative z-index
Let’s see another example of z-index property with a negative value −
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>Variables are the reserved memory locations to store values. This means that when you create a variable you reserve some space in memory.............</p>
<div></div>
</body>
</html>
Z-index for the overlay
To create an overlay effect on an image, we have used the z-index property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.showBtn {
background: #008b0c;
border: none;
color:white;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
opacity: 0.8;
}
.showBtn:hover {
opacity: 1;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.747);
}
.overlay .hideBtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: rgb(255, 0, 0);
opacity: 0.8;
}
.overlay .hideBtn:hover {
opacity: 1;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: white;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: rgb(54, 21, 241);
font-size: 17px;
border: none;
color:white;
cursor: pointer;
opacity: 0.8;
}
.overlay button:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="overlay" >
<span class="hideBtn">×</span>
<div class="searchBar">
<form >
<button type="submit">Close Overlay</button>
</form>
</div>
</div>
<h1>Overlay Effect Example</h1>
<button class="showBtn">Turn Overlay On</button>
<h2>Click on the above button to try overlay effect</h2>
<script>
document.querySelector('.hideBtn').addEventListener('click',hideSearch);
document.querySelector('.showBtn').addEventListener('click',showSearch);
function showSearch() {
document.querySelector('.overlay').style.display = "block";
}
function hideSearch() {
document.querySelector('.overlay').style.display = "none";
}
</script>
</body>
</html>
Updated on: 27-Dec-2023
177 Views
Advertisements