css - 绝对定位的 div 的相对定位同级已移至上方

Question

下面我有一个绝对定位的 div#in，它位于相对位置 div#out 内。 div#in 被从流中拉出，并通过将顶部、底部、左、右坐标设置为 0 来拉伸(stretch)到 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 :

An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or 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>