Question

下面我有一个绝对定位的div #in位于相对位置div＃out内。 div＃in被拉出流并通过坐标top，out，left，right被设置为0来拉伸div＃out。这很好，但我不明白的是，如果我给div＃sibling postion：relative它出现在div＃in上面。

我检查了所有div的z-index，它们是“auto”，我认为它与零相同。

我使用的是版本45.0.2454.101 Ubuntu 14.04（64位），但我认为这只是一个误解，而不是浏览器问题。

非常感谢任何帮助。

<style>
    #out { 
        border: 1px solid red;
        background: red;
        position: relative;
    }
    #in { 
        border: 1px solid green;
        background: green;
        position: absolute;
        top:0;
        right:0;
        bottom: 0;
        left: 0;
    }
    #sibling{
        position:relative;
    }
</style>

<div id="out"> 
    This is the outer div<br>
    position relative

    <div id="in">inner div position absolute</div>
    <div id="other">other div position static </div>
    <div id="sibling">sibling position relative </div>
</div>

Answer 1

根据w3schools：

具有更多堆栈顺序的元素始终位于元素的前面堆栈顺序较低。注意：z-index仅适用于定位元素（位置：绝对值， position：relative，或position：fixed）。

当您提供相对于#sibling的位置时，由于您的HTML订单，它会显示在#in上方。

解决方案：

为#in

提供更多z-index

CSS

#in { 
        border: 1px solid green;
        background: green;
        position: absolute;
        top:0;
        right:0;
        bottom: 0;
        left: 0;
        z-index:10;
    }

#sibling{
    position:relative;
    z-index:5;
}

HTML

<div id="out"> 
    This is the outer div<br>
    position relative

    <div id="in">inner div position absolute</div>
    <div id="other">other div position static </div>
    <div id="sibling">sibling position relative </div>
</div>

或

CSS

#in { 
        border: 1px solid green;
        background: green;
        position: absolute;
        top:0;
        right:0;
        bottom: 0;
        left: 0;
    }

#sibling{
   //you can remove position
   //position:relative;
}

HTML

<div id="out"> 
    This is the outer div<br>
    position relative
    <div id="sibling">sibling position relative </div>
    <div id="in">inner div position absolute</div>
    <div id="other">other div position static </div>
</div>

绝对定位div的相对位置兄弟已经超越了

1 个答案: