CSS - z-index Property

Previous
Next

The z-index Property

CSS z-index property controls the stacking order of elements in a web page when they overlap in the same stacking context. Elements with a higher z-index value appear in front of elements with lower values.

The following diagram demonstrates the z-index layout for reference:

z-index

CSS z-index property can be used with positioned elements that are nested inside of other positioned elements.

Syntax

The syntax for z-index property is as follows:

z-index: auto | number | initial | inherit;

Property Values

Value Description
auto It is the default value. The stack order is equal to that of the parent element.
<Integer> It represents a positive or negative integer. It sets the element's stack level to the given value.
initial It is used to set this property to it's default value.
inherit It is used to inherit the property of it's parent element.

Applies to

All positioned elements.

CSS z-index With auto Value

CSS z-index: auto sets the z-index of an element to its parent element's stack order. It is the default value for the z-index property.

Example

The following example demonstrates the z-index property with auto value.

<html>
<head>
<style>
   .box1 {
      position: absolute;
      height: 200px;
      width: 280px;
      background-color: #f0baba;
      z-index: auto;
      text-align: center;
      padding: 3px;
      left: 10px;
      top: 10px;
   }
   .box2 {
      position: absolute;
      height: 120px;
      width: 200px;
      background-color: #eae98f;
      z-index: 1;
      text-align: center;
      padding: 5px;
      margin: 20px;
      left: 30px;
      top: 30px;
   }
   p {
      margin-top: 250px;
   }
</style>
</head>
<body>
   <p>The element with z-index value of auto appears behind the element with the z-index value of 1.</p>
   <div class="box1">
      <span>CSS z-index: auto</span>
      <div class="box2">
         <span>CSS z-index: 1</span>
      </div>
   </div>
   
</body>
</html>

CSS z-index With Positive Integer

CSS z-index property can have a positive integer value. The element with a higher integer value will appear above elements with lower values in the stacking order.

Example

The following example demonstrates the z-index property with a positive integer value.

<html>
<head>
<style>
   .box1 {
      position: absolute;
      height: 200px;
      width: 280px;
      background-color: #f0baba;
      z-index: 1;
      text-align: center;
      padding: 3px;
      left: 10px;
      top: 10px;
   }
   .box2 {
      position: absolute;
      height: 140px;
      width: 220px;
      background-color: #eae98f;
      z-index: 2;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 30px; 
      top: 30px;
   }
   .box3 {
      position: absolute;
      height: 90px;
      width: 160px;
      background-color: #b7c8ae;
      z-index: 3;
      text-align: center;
      padding: 5px;
      margin: 20px;
      left: 50px; 
      top: 50px;
   }
   p {
      margin-top: 250px;
   }
</style>
</head>
<body>
   <p>The element with z-index value of 1 appears behind the element with the z-index value of 2 and 3.</p>
   <div class="box1">
      CSS z-index: 1
   </div>
   <div class="box2">
      CSS z-index: 2
   </div>
   <div class="box3">
      CSS z-index: 3
   </div>
</body>
</html>

CSS z-index With Negative Integer

You can also use negative integer values for the z-index property. An element with a negative z-index value will be stacked below elements with a higher z-index value.

Example

The following example demonstrates the z-index property with a negative integer value.

<html>
<head>
<style>
   .box1 {
      position: absolute;
      height: 200px;
      width: 280px;
      background-color: #f0baba;
      z-index: -3;
      text-align: center;
      padding: 3px;
      left: 10px; 
      top: 10px;
   }
   .box2 {
      position: absolute;
      height: 140px;
      width: 220px;
      background-color: #eae98f;
      z-index: -2;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 30px; 
      top: 30px;
   }
   .box3 {
      position: absolute;
      height: 90px;
      width: 160px;
      background-color: #b7c8ae;
      z-index: -1;
      text-align: center;
      padding: 5px;
      margin: 20px;
      left: 50px; 
      top: 50px;
   }
   p {
      margin-top: 250px;
   }
</style>
</head>
<body>
   <p>The element with z-index value of -3 appears behind the element with the z-index value of -2 and -1.</p>
   <div class="box1">
      CSS z-index: -3
   </div>
   <div class="box2">
      CSS z-index: -2
   </div>
   <div class="box3">
      CSS z-index: -1
   </div>
</body>
</html>

Placing Text Over Image

The z-index property can be used for placing a text over an image and vice-versa.

Example

In this example, we are placing a text over an image using CSS z-index property and position property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Displaying Text Over Image</title>
    <style>
        .container {
            position: relative;
            width: 500px;
        }
        img {
            display: block;
        }
        .txt {
            position: absolute;
            top: 20%;
            left: 35%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: Verdana, sans-serif;
            font-size: 16px;
            background: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h2>CSS z-index Property</h2>
    <div class="container">
        <img src="/html/images/test.png" alt="Logo">
        <p class="txt">This text displays over the photo.</p>
    </div>
</body>
</html>

CSS z-index With Sticky Position

The z-index can be used with position:sticky to fix the element's position on scroll.

Example

In this example, we have used the sticky value with z-index property to fix the position of div boxes on scroll.

<html>
<head>
<style>
   .box1 {
      position: sticky;
      height: 200px;
      width: 280px;
      background-color: #f0baba;
      z-index: 1;
      text-align: center;
      padding: 3px;
      margin: 10px;
      left: 10px; 
      top: 80px;
   }
   .box2 {
      position: sticky;
      height: 140px;
      width: 220px;
      background-color: #eae98f;
      z-index: 2;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 40px; 
      top: 200px;
   }
   .box3 {
      position: sticky;
      height: 90px;
      width: 160px;
      background-color: #b7c8ae;
      z-index: 3;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 70px; 
   } 
</style>
</head>
<body>
   <p>Move cursor upward to see the effect.</p>
   <div class="box1">
      CSS z-index: 1
   </div>
   <div class="box2">
      CSS z-index: 2
   </div>
   <div class="box3">
      CSS z-index: 3
   </div>
</body>
</html>

CSS z-index With Fixed Position

The z-index property is used with the position:fixed value to fix an element at the top of the content when the user scrolls down.

Example

In the example, we have used position:fixed value to fix the text content on top while scrolling.

<html>
<head>
<style>
   .container {
      position: relative;
      height: 350px;
   }
   .box1 {
      position: fixed;
      height: 200px;
      width: 280px;
      background-color: #f0baba;
      z-index: -3;
      text-align: center;
      padding: 3px;
      left: 10px; 
      top: 10px;
   }
   .box2 {
      position: fixed;
      height: 140px;
      width: 220px;
      background-color: #eae98f;
      z-index: -2;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 30px; 
      top: 30px;
   }
   .box3 {
      position: fixed;
      height: 90px;
      width: 160px;
      background-color: #b7c8ae;
      z-index: -1;
      text-align: center;
      padding: 5px;
      margin: 20px;
      left: 50px; 
      top: 50px;
   }
   h3 {
         margin-top: 320px;
   }
</style>
</head>
<body>
   <h3>Scroll down the content to see the effect.</h3>
   <div class="container">
      <div class="box1">
         CSS z-index: -3
      </div>
      <div class="box2">
         CSS z-index: -2
      </div>
      <div class="box3">
         CSS z-index: -1
      </div>
   </div>
</body>
</html>

CSS z-index With Static Position

The position:static property value makes the use of z-index property ineffective. The z-index property does not affect the stacking order of elements that have the static value of position property.

Example

The following example shows that the z-index property is ineffective when position:static property is used:

<html>
<head>
<style>
   .box1 {
      position: static;
      height: 200px;
      width: 280px;
      background-color: #f0baba;
      z-index: 1;
      text-align: center;
      padding: 3px;
      margin: 10px;
      left: 10px;
      top: 10px;
   }
   .box2 {
      position: static;
      height: 140px;
      width: 220px;
      background-color: #eae98f;
      z-index: 2;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 30px; 
      top: 30px;
   }
   .box3 {
      position: static;
      height: 90px;
      width: 160px;
      background-color: #b7c8ae;
      z-index: 3;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 50px; 
      top: 50px;
   }
</style>
</head>
<body>
   <p>The z-index property has no effect on the stacking order of elements if the position property is set to static.</p>
   <div class="box1">
      CSS z-index: 1
   </div>
   <div class="box2">
      CSS z-index: 2
   </div>
   <div class="box3">
      CSS z-index: 3
   </div>
</body>
</html>

CSS z-index With Relative Position

The position:relative property can be used with z-index property to position the element relative to its original position in the document flow.

Example

The following example demonstrates use of position:relative property value with z-index property.

The example shows that when elements have the position: relative property, the z-index property positions the element relative to its original position in the document flow.

<html>
<head>
<style>
   .box1 {
      position: relative;
      height: 200px;
      width: 280px;
      background-color: #f0baba;
      z-index: 1;
      text-align: center;
      padding: 3px;
      margin: 10px;
      left: 10px;
      top: 10px;
   }
   .box2 {
      position: relative;
      height: 140px;
      width: 220px;
      background-color: #eae98f;
      z-index: 2;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 30px; 
      top: 30px;
   }
   .box3 {
      position: relative;
      height: 90px;
      width: 160px;
      background-color: #b7c8ae;
      z-index: 3;
      text-align: center;
      padding: 5px;
      margin: 10px;
      left: 50px; 
      top: 50px;
   }
</style>
</head>
<body>
   <p>The z-index property positions the element relative to its original position if position is relative.</p>
   <div class="box1">
      CSS z-index: 1
   </div>
   <div class="box2">
      CSS z-index: 2
   </div>
   <div class="box3">
      CSS z-index: 3
   </div>
</body>
</html>
Print Page
Previous
Next
Advertisements