Blogs > Responsive Web Design

Responsive Web design

Solution With CSS properties

In this code snippet, we will explain how to use the z-index property in CSS is used to control the stacking order of elements on a webpage along the z-axis (the depth axis). It specifies the stack level of a positioned element and determines which elements appear on top of others.

Here's how to use and understand z-index in CSS:

Basics:

z-index works only on positioned elements (i.e., those with a position property value of relative , absolute , or fixed ).
By default, all elements have a z-index of auto , meaning they stack in the order they appear in the HTML markup, with later elements appearing on top of earlier ones.
The higher the z-index value, the closer the element is to the top of the stacking order.

Syntax

selctor{
    z-index :value;
  }

Understanding Stacking Contexts:

Each positioned element with a z-index value other than autocreates a new stacking context.
Stacking contexts can be nested, with children inheriting the z-index of their parent stacking context.
Elements within a stacking context are stacked according to their z-index values relative to other elements within the same stacking context.

Z-index Values:

integer Positive or negative integer values determine the stacking order. Higher values appear closer to the top.
autoThe default value. Elements stack in the order they appear in the HTML.

Examples:

/* Higher z-index value makes the element appear on top */
    .element1{
    position :relative;
    z-index :2;
  }
/* Lower z-index value makes the element appear below */
    .element2{
    position :relative;
    z-index :1;
  }

Common Issues and Solutions:

Element Not Stacking Correctly: Ensure that the elements you want to stack have a position property set to relative , absolute , or fixed.
Parent-child Relationship: Remember that a child element's z-index is relative to its parent's z-index.
Stacking Order Confusion: Use browser developer tools to inspect stacking orders if elements are not stacking as expected.

Tips:

Use z-index sparingly and only when necessary to avoid confusion and maintain code readability.
Prefer using a logical structure and layout to avoid reliance on z-indexfor positioning.

Understanding z-index in CSS is crucial for controlling the visual hierarchy of elements on a webpage. With proper usage, you can ensure that important elements are prominently displayed while maintaining a clean and organized layout.

Example

<!DOCTYPE HTML>
<html>
  <head>
  <style>
  .container{
    position :relative;
  }
  .box{
    width:200px;
    height:150px;
    padding:20px;
    margin-botton:20px;
    text-align:center;
  }
  .red{
    background-color:red;
    position:relative;
    z-index:2;
  }
  .blue{
    background-color:blue;
    position:relative;
    z-index:1;
  }
  .green{
    background-color:green;
    position:relative;
    z-index:0;
  }
  </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <div class="container">
      <div class="box red">Red Box</div>
      <div class="box blue">Red Blue</div>
      <div class="box green">Red Green</div>
    </div>
  </body>
</html>

Try it Yourself »

In this example, we have three boxes (red, blue, green) stacked on top of each other. The red box has the highest z-index, followed by the blue box, and finally, the green box has the lowest z-index. As a result, the red box appears on top of the blue and green boxes, and the blue box appears on top of the green box.

You can adjust the z-index values in the CSS to see how they affect the stacking order of the boxes.

Contributor:

Bilal Mubarak Idris Published 2025