CSS - Layers

Previous
Quiz
Next

CSS Layers are a concept that is used to control the stacking order of different DOM elements in a webpage. The z-index property determines the stacking order of elements within a stacking context.

The elements with a higher z-index are layered above those with a lower z-index and if elements share the same z-index, they stack according to their order in the DOM. We will look more into details and examples of CSS layering in this tutorial.

Table of Contents

CSS Layering With z-index Property

As mentioned above the z-index property can be used to decide stacking order of element in a webpage. The following example demonstrates how to create vertically stacked elements using z-index property. The elements with higher z-index value are positioned above the elements of lower z-index value.

Example

<html>

<head>
    <style>
        div{
            position: absolute;
            height: 100px;
            width: 100px;
            padding: 5px;
            color: white;
        }
        .box1 {
            background-color: darkred;
            z-index: 1;
            left: 10px;
            top: 10px;
        }
        .box2 {
            background-color: darkblue;
            z-index: 2;
            margin: 10px;
            left: 50px; 
            top: 30px;
        }
        .box3 {
            background-color: darkgreen;
            z-index: 3;
            margin: 20px;
            left: 80px; 
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="box1">
        z-index: 1
    </div>
    <div class="box2">
        z-index: 2
    </div>
    <div class="box3">
        z-index: 3
    </div>
</body>

</html>

Layer Text Above Image

In CSS position property can be used to position text in different locations above an image.

First we need to set position property for image container as `position: relative` and position property of text as `position: absolute`. Now you can position of text elements using CSS inset properties like top, bottom, left and right.

Example

<html>
<head>
    <style>
        .container {
            position: relative;
            border: 2px solid #ef2c2c;
        }
        .center {
            position: absolute;
            top: 45%;
            width: 100%;
            text-align: center;
        }
        .top-left {
            position: absolute;
            top: 12px;
            left: 30px;
        }
        .top-right {
            position: absolute;
            top: 12px;
            right: 30px;
        }
        .bottom-left {
            position: absolute;
            bottom: 12px;
            left: 30px;
        }
        .bottom-right {
            position: absolute;
            bottom: 12px;
            right: 30px;
        }
        img {
            width: 100%;
            opacity: 0.7;
        }
    </style>
</head>
<body>
   <div class="container">
        <img src="/https/www.tutorialspoint.com/css/images/red-flower.jpg" 
                width="1000px" height="350px">

        <h3 class="center">
            Text at Center
        </h3>
        <h3 class="top-left">
            Text at Top Left
        </h3>
        <h3 class="top-right">
            Text at Top Right
        </h3>
        <h3 class="bottom-left">
            Text at Bottom Left</h3>
        <h3 class="bottom-right">
            Text at Bottom Right
        </h3>
   </div>
</body>
</html>

Positioning Without z-index Property

The following example demonstrates how to create layers without using z-index property.

Example

<html>

<head>
    <style>
        div{
            position: absolute;
            height: 100px;
            width: 100px;
            padding: 5px;
            color: white;
        }
        .box1 {
            background-color: darkred;
            padding: 10px;
            left: 10px;
            top: 10px;
        }
        .box2 {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
            left: 30px; 
            top: 30px;
        }
        .box3 {
            background-color: yellow;
            padding: 5px;
            margin: 10px;
            left: 60px; 
            top: 60px;
        }
    </style>
</head>

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

</html>
Print Page
Previous
Next
Advertisements