CSS - Z-Index

Ethan D. -

Understanding Stacking Context

To understand how z-index works, you first need to grasp the concept of stacking context. Stacking context defines the order in which elements are stacked on top of each other in the z-axis. It determines which elements appear in front or behind other elements when they overlap.

Several factors can create a new stacking context:

  1. Root element (<html>)
  2. Elements with a position value other than static and a z-index value other than auto
  3. Elements with an opacity value less than 1
  4. Elements with certain CSS properties, such as transform, filter, or perspective

Within a stacking context, elements are stacked according to a specific order:

  1. Background and borders of the element creating the stacking context
  2. Elements with negative z-index values (in order from lowest to highest)
  3. Elements with a z-index value of auto (in the order they appear in the HTML)
  4. Elements with positive z-index values (in order from lowest to highest)

It's important to note that stacking contexts can be nested. If an element creates a new stacking context, its child elements are stacked within that context. The stacking order of the child elements is independent of the stacking order outside the parent's stacking context.

When multiple elements have the same z-index value within a stacking context, they are stacked according to their order in HTML code. Elements that appear later in HTML will be stacked on top of earlier ones with the same z-index value.

Understanding stacking context is key to using z-index well because it helps you determine how elements will be layered and how they interact when positioned and stacked using z-index.

Assigning Z-Index Values

To control the stacking order of elements using z-index, you need to assign z-index values to the elements. The z-index property accepts integer values, which can be positive, negative, or zero. You can also use the keyword auto, which is the default value.

The syntax for setting z-index is as follows:

Example: CSS z-index syntax

selector {
  z-index: value;
}

Positive z-index values (e.g., 1, 2, 3) bring an element closer to the front, making it appear on top of elements with lower z-index values or elements without a specified z-index. The higher the positive value, the closer the element is to the front.

Negative z-index values (e.g., -1, -2, -3) push an element further away from the front, making it appear behind elements with higher z-index values. The lower the negative value, the further back the element is positioned.

When you assign a z-index value of auto, the element is positioned according to its default stacking order within its parent stacking context. Elements with auto will appear behind elements with positive values and in front of those with negative values.

Example: HTML structure with z-index

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

Example: CSS styles with z-index

.box {
  position: absolute;
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: red;
  z-index: 3;
}
.box2 {
  background-color: green;
  z-index: 2;
} 
.box3 { 
  background-color: blue; 
  z-index: 1;  
}
  • The red box (.box1) will appear on top.
  • The green box (.box2) will be in between.
  • The blue box (.box3) will be at the bottom.

This happens because .box1 has a higher value than .box2, and .box2 has a higher value than .box3.

It's important to note that this property only works on positioned elements (elements with a position other than static). If an element doesn't have a specified position or has a position of static, this property will not affect its stacking order.

Stacking Elements with Z-Index

Z-index allows you to layer elements on top of each other in a specific order. By assigning different z-index values to elements, you can change their stacking order and control which elements appear in front or behind others.

To layer elements using z-index, you need to assign z-index values to the elements you want to stack. Elements with higher z-index values will appear in front of elements with lower z-index values.

Example: HTML structure for stacking elements

<div class="container">
  <div class="card card1">Card 1</div>
  <div class="card card2">Card 2</div>
  <div class="card card3">Card 3</div>
</div>

Example: CSS styles for stacking elements

.card {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.card1 {
    z-index: 3; 
}
.card2 { 
    z-index: 2; 
    top: 50px; 
    left: 50px; 
}
.card3 { 
    z-index: 1; 
    top: 100px;  
    left: 100px;  
}

In this example, .card1 will appear on top of .card2 and .card3 because it has the highest value. .card2 will appear between .card1 and .card3, while .card3 will be at the bottom.

You can change the stacking order by modifying their values. If you want an element to appear behind another element, give it a lower value. If you want an element to appear in front of another element, give it a higher value.

Example: Dropdown menu

<ul class="menu">
   <li class="menu-item">
      <a href="#">Menu Item</a>    
      <ul class="submenu">    
         <li><a href="#">Submenu Item</a></li>   
         <li><a href="#">Submenu Item</a></li>   
         <li><a href="#">Submenu Item</a></li>     
     </ul>      
   </li>     
</ul>
.menu-item {
   position: relative;
}
.submenu {
   position: absolute;
   top: 100%;
   left: 0;
   display: none;
}
.menu-item:hover .submenu {
   display: block;
}

In this dropdown menu example, the submenu is positioned absolutely and given a lower value. This keeps the submenu appearing in front when displayed on hover.

Another example is creating overlays or modal windows:

Example: Modal overlay

<div class="modal">
  <div class="modal-content">
    <h2>Modal Title</h2>        
    <p>Modal content goes here...</p>        
    <button class="close-btn">Close</button>      
  </div>    
</div>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  z-index: 10000;
}

In this modal example, the modal overlay has a high value of 9999 to cover the entire page. The modal content itself has an even higher index value of 10000 to appear on top of the overlay.

Z-index is a strong tool for controlling the stacking order of elements and creating visually appealing layouts. By carefully assigning values, you can layer elements, create overlays, and build complex UI components.

Z-Index and Positioning

Z-index and positioning are related concepts in CSS. The z-index property only affects elements with a position value other than static. This means that for z-index to have any effect, the element must be positioned using relative, absolute, or fixed.

Relative Positioning

When an element is positioned using relative, it remains in the normal document flow, and other elements around it are not affected. You can use z-index to control the stacking order of relatively positioned elements within the same stacking context.

Relative Positioning Example

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
.box {
  position: relative;
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: red;
  z-index: 3;
  top: 20px;
}
.box2 {
  background-color: green;
  z-index: 2;
}
.box3 {
  background-color: blue;
  z-index: 1;
}

The boxes are positioned using relative, and z-index is used to control their stacking order. Box1 will appear on top, followed by Box2 and then Box3.

Absolute Positioning

Elements with absolute positioning are removed from the normal document flow and positioned relative to their closest positioned ancestor or the initial containing block if no positioned ancestor exists. Z-index can be used to control the stacking order of absolutely positioned elements within the same stacking context.

Absolute Positioning Example

<div class="container">
  <div class="box box1">Box1</div> 
  <div class="box box2">Box2</div> 
  <div class="box box3">Box3</div>
</div>
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f1f1f1;
}
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: red;
  z-index: 3;
  top: 20px;
}
.box2 {
  background-color: green;
  z-index: 2;
  top: 60px;
}
.box3 {
  background-color: black;
  z-index: 0;
}

The boxes are placed using absolute within a container that has been placed relatively. Z-index controls how they stack up, with Box1 on top, followed by Box2, then Box3.

Fixed Positioning

Elements with fixed positioning also get removed from regular document flow but instead align themselves according to viewport dimensions. Z-index helps manage their layering when multiple such items exist together.

Fixed Positioning Example

<div class="header">Header</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit...</p>
</div>
<div class="footer">Footer</div>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: #fff;
  z-index: 10;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: #fff;
  z-index: 10;
}
.content {
  margin-top: 80px;
  margin-bottom: 80px;
}

The header and footer both use fixed placement while the content gets margins so as not to overlap them.

Z-Index and Opacity

Opacity is a CSS property that can impact the stacking order of elements when used with z-index. When an element has an opacity value less than 1, it creates a new stacking context, similar to how positioned elements with a z-index value other than auto create a new stacking context.

The opacity property controls the transparency of an element. It accepts values between 0 and 1, where 0 means fully transparent and 1 means fully opaque. When you set an opacity value less than 1 on an element, it becomes semi-transparent, allowing the content behind it to be partially visible.

When you combine z-index with opacity, you can create interesting visual effects and layering.

Opacity and Z-Index Example

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>
.box {
  position: absolute;
  width: 200px;
  height: 200px;
}
.box1 {
  background-color: red;
  z-index: 3;
}
.box2 {
  background-color: green;
  z-index: 2;
  opacity: 0.7; 
}
.box3 {
  background-color: blue; 
  z-index: 1; 
}

In this case, .box2 has an opacity value of 0.7, making it semi-transparent. Even though .box1 has a higher z-index value, the content of .box3 will be visible through .box2 because of its transparency.

Opacity is commonly used to create transparent overlays or modal windows. By setting a lower opacity value on an overlay element and giving it a higher z-index value, you can create a semi-transparent layer that covers the content beneath it.

Transparent Overlay Example

<div class="content">
  <h1>Page Content</h1>
  <p>Lorem ipsum dolor sit amet...</p> 
</div> 
<div class="overlay"></div> 
.content {  
  position: relative;  
  z-index: 1;
}
.overlay {  
  position: fixed;  
  top: 0;   
  left: 0;   
  width: 100%;   
  height: 100%;   
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

In this case, the .overlay element has a semi-transparent background color using the rgba() function and a high z-index value. It covers the entire viewport, creating a darkening effect on the content beneath it.

When using opacity and z-index together, keep a few considerations in mind:

  • Elements with opacity create a new stacking context, so their child elements are stacked within that context.
  • The stacking order of elements with opacity is determined by their z-index values within their respective stacking contexts.
  • If an element has opacity and a z-index value other than auto, it creates a new stacking context, and its child elements are stacked within that context.