Question

假设我有3个元素，如

<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>

现在，我得到的div3涵盖了所有其他div。是否有CSS规则使一个元素优先于position: absolute的其他元素？

Answer 1

如您所愿，为所有div添加z-index：

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;
}

还记得在定义顶部和左侧值时使用单位，你有top: 10;十个什么？：）

Example here

显示位置绝对的元素的优先级

1 个答案: