CSS Tutorials

Overlapping and Layering with z-index

A CSS feature called z-index regulates the stack order of particular items that overlap one another. Generally speaking, an element with a higher z-index covers an element with a lower one.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overlapping and Layering</title>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            padding: 10px;
            text-align: center;
            color: white;
        }
        .box1 { background-color: red; left: 50px; top: 50px; z-index: 2; }
        .box2 { background-color: blue; left: 100px; top: 100px; z-index: 1; }
    </style>
</head>
<body>
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
</body>
</html>

Two boxes are positioned absolutely, which means they are moved to the top and left properties and out of the regular flow.

Box 1 overlaps Box 2 because it has a greater z-index, illustrating how the z-index affects how items are stacked vertically.

logo

CSS

Overlapping and Layering with z-index

Beginner 5 Hours

A CSS feature called z-index regulates the stack order of particular items that overlap one another. Generally speaking, an element with a higher z-index covers an element with a lower one.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overlapping and Layering</title>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            padding: 10px;
            text-align: center;
            color: white;
        }
        .box1 { background-color: red; left: 50px; top: 50px; z-index: 2; }
        .box2 { background-color: blue; left: 100px; top: 100px; z-index: 1; }
    </style>
</head>
<body>
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
</body>
</html>

Two boxes are positioned absolutely, which means they are moved to the top and left properties and out of the regular flow.

Box 1 overlaps Box 2 because it has a greater z-index, illustrating how the z-index affects how items are stacked vertically.

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for css

line

Mail us :

Address :

India

Categories

Copyrights © 2024 letsupdateskills All rights reserved