Visibility and z-index in CSS

What is z-index?

  • The z-index property specifies the stack order of an element.

  • An element with greater stack order is always in front of an element with a lower stack order.

  • z-index only works on positioned elements.

  • z-index does not work with px it works only on numbers.


This will be our boilerplate:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Visibility in CSS </title>
    <style>

    </style>

</head>
<body>

</body>
</html>


z-index values

i) auto: This property value sets the stack order equal to its parents. This is the default.

.box {
    z-index: auto;
}


ii) number:  Sets the stack order of the element. And we can also use negative numbers.

.box {
    z-index: 1;
}


iii) initial: Sets this property to its default value.

.box {
    z-index: initial;
}


iv) inherit: This property value will inherit the property from its parent element.

.box {
    z-index: inherit;
}


Using z-index Properties

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> z-index in CSS </title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            background-color: purple;
            width: 20rem;
            height: 20rem;
            z-index: -1;
        }

        .para{
            color: white;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p class="para">Welcome to CSS Master Series of Geeks Help</p>
</body>
</html>

Output:


CSS Visibility and z-index Property PDF

Download Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad