CSS z-index Property: A Comprehensive Guide

CSS z-index Property: A Comprehensive Guide

4 mins read210 Views Comment
Esha
Esha Gupta
Associate Senior Executive
Updated on Oct 27, 2023 15:39 IST

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!

2023_10_What-is-24.jpg

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

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:

  1. X-axis: Represents the horizontal axis (left and right).
  2. Y-axis: Represents the vertical axis (up and down).
  3. Z-axis: Represents the depth axis (forward and backward, or front and behind).
2023_10_Screenshot-2023-10-18-113218.jpg

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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

  1. 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.
  2. In websites with parallax effects, different layers move at different speeds, and z-index can be used to control their stacking order.
  3. Dropdown or flyout menus often need to appear over other page content when expanded.
  4. Dialog boxes typically should appear above all other content on a page.
  5. 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>
Copy code

Output

2023_10_Screenshot-2023-10-18-163359.jpg

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>
Copy code

Output

2023_10_esha1234-1.gif

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>
Copy code

Output

2023_10_esha123-1.gif

In this example, clicking on the “Shiksha Online” logo will bring it to the forefront, simulating an active image in a gallery.

All About CSS Syntax
All About CSS Syntax
Have you ever wondered how websites get their unique styles? It’s all because of CSS syntax, the rules web designers follow to style web pages. Let’s understand more! CSS syntax...read more
How to Link CSS to HTML
How to Link CSS to HTML
Have you ever wondered how to make your website visually appealing and well-structured? Linking CSS to HTML is the key to achieving this. Let’s understand more! Learning how to Link...read more
Top CSS Interview Questions and Answers for 2023
Top CSS Interview Questions and Answers for 2023
CSS or Cascading Style Sheets is a design language for defining the look and formatting of web pages. Many businesses today use CSS to add styling such as fonts, colors,...read more

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!

About the Author
author-image
Esha Gupta
Associate Senior Executive

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