In this article, we will cover css z-index and cover lots of use cases with code examples.
CSS z-index is a property that controls the vertical stacking order of elements on a web page.
This property can be used to control the order in which elements are displayed on top of each other, allowing web developers to create a more visually appealing layout.
In this article, we will explore the basics of the CSS z-index property, provide examples of its use cases, and give tips for its implementation.
Basics of the CSS z-index Property:
The z-index property in CSS determines the stacking order of positioned elements.
By default, all elements on a web page are positioned in the same plane, so their stacking order is determined by their order in the HTML markup.
However, when you apply the CSS z-index property to an element, it creates a new stacking context for that element and its descendants.
The z-index property takes a numeric value, which can be positive or negative.
The higher the value, the closer the element is to the top of the stack.
For example, an element with a z-index of 2 will be displayed on top of an element with a z-index of 1.
Example 1:
Let’s take a look at a simple example to understand the CSS z-index property better. Consider the following HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<style>
#box1 {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
top: 50px;
left: 50px;
z-index: 1;
}
#box2 {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
In this example, we have two div elements with different z-index values.
The first div element has a z-index of 1, and the second div element has a z-index of 2.
As a result, the blue box will be displayed on top of the red box because it has a higher z-index value.
Example 2:
Another example of the CSS z-index property can be seen in creating a modal window.
A modal window is a popup window that appears on top of the web page and is used to display information, such as a login form or a product details page.
To create a modal window, we can use the CSS z-index property to place the modal window on top of the rest of the web page content.
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 400px;
height: 300px;
z-index: 9999;
}
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="modal">
<h2>Modal Window</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username"
</form>
</div>
</body>
</html>In this example, we have two div elements: one for the modal window and one for the overlay.
The modal window is positioned in the center of the screen and has a higher z-index value than the overlay.
The overlay covers the entire web page and has a semi-transparent background color to create the effect of the rest of the web page is grayed out and inactive while the modal window is open.
Use Cases of CSS z-index Property:
In this section, we are going to look at 3 important use cases for the use of the z-index property. Each one of them is often used in most applications.
1. Dropdown Menus
Dropdown menus are a common feature of many websites.
The CSS z-index property can be used to ensure that the dropdown menu appears on top of other content on the page, making it easier for users to select the desired option.
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
position: relative;
display: inline-block;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 999;
}
.menu:hover ul {
display: block;
}
.menu li {
background-color: white;
padding: 10px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">Menu</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</body>
</html>
2. Modals
Modals are often used to display important information, such as login forms or product details pages.
The CSS z-index property can be used to ensure that the modal appears on top of other content on the page, making it more noticeable and easier to interact with.
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 400px;
height: 300px;
z-index: 9999;
}
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="modal">
<h2>Modal Window</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username">
<label for="password">Password:</label>
<input type="password" id="password">
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
3. Stacked Images
Stacking images can create an interesting visual effect on a web page.
The CSS z-index property can be used to control the order in which the images are displayed, allowing developers to create complex designs and layouts.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
width: 300px;
height: 200px;
.image1 {
z-index: 3;
top: 50px;
left: 50px;
}
.image2 {
z-index: 2;
top: 100px;
left: 100px;
}
.image3 {
z-index: 1;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<img class="image1" src="image1.jpg" alt="Image 1">
<img class="image2" src="image2.jpg" alt="Image 2">
<img class="image3" src="image3.jpg" alt="Image 3">
</body>
</html>
In this example, we have three images that are positioned on top of each other using the position:absolute property.
The z-index property is used to control the order in which the images are displayed.
The image with the highest z-index value (image1) appears on top, while the image with the lowest z-index value (image3) appears on the bottom.
Final Words
The CSS z-index property is a powerful tool for controlling the stacking order of elements on a web page.
By setting the z-index value of an element, developers can control whether the element appears in front of or behind other elements on the page.
This property can be used in a variety of ways, from creating dropdown menus and modals to stacking images and other visual elements.
By understanding how the z-index property works, developers can create complex layouts and designs that are visually appealing and easy to navigate.