Home > DeveloperSection > Blogs > Z-Index property in CSS3

Z-Index property in CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1728  View(s)
Rate this:

Z-Index property in CSS3

In this blog I am trying to explain the z-index in CSS3.

Z-Index:

The z-index sets the stacking level of an element. An element with greater stack order is always in front of an element with a lower stack order. It works only on positioned elements these positions are following:

1.       Position: absolute

2.       Position: relative

3.        Position: fixed

Z-index has three values these are given below:

1.       Auto

It is default the value of z-index and it is sets the stack order equal to its parents.

2.       Number

This value is set the stack order of the element. Here is allowed only positive integer value.

3.       Inherit

Specify that the z-index should be inherited from the parent element.

Note:

Z-index will work when the position property is set as well.

Html Code:

<html>

<head>

</head>

<body>

    <div style="background-color: #CD853F; width: 200px; height: 100px; position: relative;

        top: 10px; left: 80px; z-index: 2">

        <p style="color: #E5E5E5;">

            Mindstick India</p>

    </div>

    <div style="background-color: #E5E5E5; width: 200px; height: 100px; position: relative;

        top: -60px; left: 35px; z-index: 1;">

        <p style="color: #CD853F;">

            Mindstick U.S.A</p>

    </div>

</body>

</html>

Output:


Don't want to miss updates? Please click the below button!

Follow MindStick