CSS z-index Property: A Comprehensive Guide
Have you ever wondered how elements stack and overlap in web design? Dive deep into the world of CSS and let us learn more about it!
The z-index property in CSS controls the stacking order of elements that overlap. It determines which elements appear in front of or behind other elements when their positions cause them to occupy the same space in a layout.
Table of Content
Best-suited Web Development courses for you
Learn Web Development with these high-rated online courses
What is z-index?
The term “z-index” comes from the concept of three-dimensional coordinate systems. In a 3D space, you typically have three axes:
- X-axis: Represents the horizontal axis (left and right).
- Y-axis: Represents the vertical axis (up and down).
- Z-axis: Represents the depth axis (forward and backward, or front and behind).
You can also explore difference between 2D and 3D shapes
While most of the positioning in CSS deals with the X (horizontal) and Y (vertical) axes, the z-index property is named as such because it deals with stacking elements along the Z-axis. In other words, it defines the depth at which an element appears in relation to other overlapping elements, dictating which elements are “in front” or “behind” others, much like how objects can be closer or further away from you in 3D space.
CSS z-index Property
Definition
The z-index property in CSS specifies the stack order of positioned elements. Elements with a higher z-index value are drawn in front of elements with a lower or negative value. It determines the order in which elements overlap one another, allowing developers to control which elements appear above or below others in the context of overlapping visual content.
Syntax
z-index: auto|number|initial|inherit;
Property Values
When elements overlap, the z-index value dictates which one appears on top of the others. The possible values for this property are:
- auto
- This is the default value for z-index.
- When set to auto, the element gets its stack level naturally according to its position in the HTML structure (i.e., as it appears in the source code) or its parent’s stacking context.
- Useful when you want an element’s stacking order to follow the natural document flow without giving it an explicit stack level.
- number
- This can be any integer (positive, negative, or zero).
- Elements with a higher z-index number will appear in front of elements with a lower number within the same stacking context.
- Useful when you have overlapping elements, and want to control which one appears on top, such as dropdown menus, modals, or tooltips.
- initial:
- This value sets the property back to its default, which for z-index is auto.
- Can be used to override any previously set z-index values and reset them back to their default behaviour.
- Examples include: If an element is given a z-index in one style rule, but in a later rule, you want to reset it to its default, you can set it to initial.
- inherit
- This means the element will take the z-index value of its parent element.
- Useful when you want child elements to maintain the same stack level as a parent or to explicitly adopt a parent’s z-index.
- Examples include : In cases where a child element should always stay above or below its parent, regardless of the parent’s z-index.
Usage
- When you have multiple elements that overlap, such as images, divs, or any other elements, and you need to control which one appears on top.
- In websites with parallax effects, different layers move at different speeds, and z-index can be used to control their stacking order.
- Dropdown or flyout menus often need to appear over other page content when expanded.
- Dialog boxes typically should appear above all other content on a page.
- When content scrolls beneath a fixed header or footer, z-index ensures the header/footer stays on top.
This property has many other uses for making our web content user-friendly!
Examples
Let’s see a few examples to help us understand the concept more clearly!
1. Overlaying the Image over Text
<!DOCTYPE html><html>
<head> <title>z-index Overlay Example</title> <style> img { position: absolute; left: 30px; top: 30px; z-index: 1; }
h1, p { background-color: lightblue; padding: 10px; } </style></head>
<body>
<h1>Shiksha Online Courses</h1> <img src="https://w10.naukri.com/mailers/2023/naukri-learning/march/Transparent-Bg/Shiksha-Online-Logo-500_228.png" width="300"> <p>Explore our range of courses and find the best fit for you!</p>
</body>
</html>
Output
In this example, the “Shiksha Online” logo appears over the h1 and p text.
2. Tooltip on Hover
<!DOCTYPE html><html>
<head> <title>z-index Tooltip Example</title> <style> #tooltip { position: absolute; left: 50px; top: 20px; background-color: black; color: white; padding: 5px; border-radius: 5px; visibility: hidden; z-index: 2; }
img:hover + #tooltip { visibility: visible; }
img { position: relative; z-index: 1; } </style></head>
<body>
<img src="https://w10.naukri.com/mailers/2023/naukri-learning/march/Transparent-Bg/Shiksha-Online-Logo-500_228.png" width="300"> <div id="tooltip">Shiksha Online - The Future of Learning</div>
</body>
</html>
Output
In this example, hovering over the “Shiksha Online” logo will display a tooltip above it.
3. Image Gallery with an Active Image
<!DOCTYPE html><html>
<head> <title>z-index Image Gallery Example</title> <style> img.active { z-index: 2; }
img { position: relative; left: 50px; transition: all 0.3s; }
img:hover { cursor: pointer; transform: scale(1.05); } </style> <script> function activateImage(img) { let images = document.querySelectorAll("img"); images.forEach(image => image.classList.remove("active")); img.classList.add("active"); } </script></head>
<body>
<img src="https://w10.naukri.com/mailers/2023/naukri-learning/march/Transparent-Bg/Shiksha-Online-Logo-500_228.png" width="200" onclick="activateImage(this)"> <img src="https://w10.naukri.com/mailers/2023/naukri-learning/march/Transparent-Bg/Shiksha-Online-Logo-500_228.png" width="200" onclick="activateImage(this)"> <img src="https://w10.naukri.com/mailers/2023/naukri-learning/march/Transparent-Bg/Shiksha-Online-Logo-500_228.png" width="200" onclick="activateImage(this)">
</body>
</html>
Output
In this example, clicking on the “Shiksha Online” logo will bring it to the forefront, simulating an active image in a gallery.
Read Later
Conclusion
The z-index property in CSS allows developers to position elements along the z-axis, effectively controlling their stacking order. This is particularly important when designing complex layouts with overlapping elements, such as modals, tooltips, dropdown menus, and layered animations. When used thoughtfully, z-index can help create a smooth user experience. Keep Learning, Keep Exploring!
Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio
Top Picks & New Arrivals
