Question

Suppose I have 3 elements as in

<style>
    div#div1{
        height: 100px;
        width: 100px;
        position: absolute;
        left: 0;
        top: 0;
        background: green;
    }


    div#div2{
        height: 100px;
        width: 100px;
        position: absolute;
        left: 10;
        top: 10;
        background: blue;       
    }


    div#div3{
        height: 100px;
        width: 100px;
        position: absolute;
        left: 20;
        top: 20;
        background: red;
    }

</style>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Now, I am getting div3 is covering all other div. Is there a CSS rule that gives one element precedence over other element with position: absolute?

Answer 1

To do as you wish add a z-index to all the divs:

div#div1
{
    height: 100px;
    width: 100px;
    position: absolute;
    left: 0;
    top: 0;
    background: green;
    z-index: 3;
}


div#div2
{
    height: 100px;
    width: 100px;
    position: absolute;
    left: 10px;
    top: 10px;
    background: blue;     
    z-index: 2; 
}

#div3
{
height: 100px;
    width: 100px;
    position: absolute;
    left: 20px;
    top: 20px;
    background: red;
    z-index: 1;
}

Also remember to use units when defining top and left values, you had top: 10; ten what? 🙂

Example here.