How to handle Overlapping Elements with Z-Index using CSS ?

Last Updated : 01 Feb, 2024

Handling overlapping elements with z-index in CSS involves assigning a stacking order to positioned elements. To implement this, ensure the elements have a specified position property (e.g., relative, absolute).

Syntax:

.element-1 {
   z-index: -1;
}
.element-2 {
   z-index: 2;
}

Table of Content

Using Positive z-index value
Using Negative z-index

Using Positive z-index value

Elements element1 and element2 differ in initial z-index within the container which overlap over each other. Apply styling to the elements, including positioning, dimensions, and initial z-index values. Utilize the z-index property to control the stacking order of elements, ensuring the desired layering. Implement a hover effect with increased z-index values for both elements to bring them to the forefront on hover.

Example: Illustration of handling the overlapping elements with positive Z-Index using CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
          "width=device-width, initial-scale=1.0"> 
    <title>overlapping elements with Z-Index </title> 
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
            height: 100vh; 
            background-color: #f0f0f0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        } 
  
        h1 { 
            text-align: center; 
            font-size: 40px; 
            color: green; 
        } 
  
        h2 { 
            text-align: center; 
            color: rgb(170, 2, 106); 
        } 
  
        .container { 
            display: grid; 
            align-items: center; 
            justify-content: center; 
            border: 2px solid blue; 
            border-radius: 10px; 
        } 
  
        .element1 { 
            position: relative; 
            top: 50px; 
            background-color: red; 
            width: 200px; 
            height: 200px; 
            z-index: 0; 
        } 
  
        .element2 { 
            position: relative; 
            top: -40px; 
            left: 50px; 
            background-color: blue; 
            width: 200px; 
            height: 200px; 
            z-index: 1; 
        } 
  
        .element1:hover, 
        .element2:hover { 
            z-index: 3; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="main"> 
        <h1>GeeksForGeeks</h1> 
        <h2> 
            Handling the overlapping 
            elements with Z - index  
        </h2> 
        <div class="container"> 
            <div class="element1"></div> 
            <div class="element2"></div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

c7e66602-33fd-4f12-a814-eaae5f15d65f-ezgifcom-crop

Using Negative z-index

CSS styles define a flex container with border, border-radius, and relative position. Elements have distinct colors and negative z-index for layering. Negative z-index values indicate their stacking order, with higher absolute values appearing closer to the viewer.

Example: Illustration of handling the overlapping of elements with Z-Index using negative value.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
          "width=device-width, initial-scale=1.0" /> 
    <title>Negative z-index</title> 
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
            height: 100vh; 
            background-color: #f0f0f0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        } 
  
        h1 { 
            text-align: center; 
            font-size: 40px; 
            color: green; 
        } 
  
        h2 { 
            text-align: center; 
            color: rgb(170, 2, 106); 
        } 
  
        .container { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            border: 2px solid blue; 
            border-radius: 10px; 
            position: relative; 
            height: 40vh; 
        } 
  
        .element1 { 
            position: absolute; 
            background-color: red; 
            width: 200px; 
            height: 200px; 
            z-index: -2; 
        } 
  
        .element2 { 
            position: absolute; 
            top: 20px; 
            left: 100px; 
            background-color: blue; 
            width: 200px; 
            height: 200px; 
            z-index: -4; 
        } 
  
        .element3 { 
            position: absolute; 
            background-color: rgb(16, 180, 10); 
            bottom: 20px; 
            right: 100px; 
            width: 200px; 
            height: 200px; 
            z-index: -1; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="main"> 
        <h1>GeeksForGeeks</h1> 
        <h2> 
            Handling the overlapping elements 
            with Z - index negative value 
        </h2> 
        <div class="container"> 
            <div class="element1"></div> 
            <div class="element2"></div> 
            <div class="element3"></div> 
        </div> 
    </div> 
</body> 
  
</html>