Question

基于MDN文章＆＃34; Stacking and float＆＃34;，

堆叠并浮动

对于浮动块，堆叠顺序略有不同。漂浮的   块放在非定位块和定位块之间：


根元素的背景和边框

正常流程中的后代阻塞，按外观顺序（以HTML格式）

浮动块

后代按照外观（以HTML格式）
定位元素

然而，当我自己尝试示例代码时，我发现DIV＃1落后于DIV＃3。不应该把DIV＃1放在DIV＃3的前面吗？

DIV＃1是定位元素，因此它应该在浮动块之后/之前呈现。

请检查以下代码或jsfiddle。

h1 {
    margin:0;
}

<body>
    <br /><br />

    <div id="absdiv1">
        <br /><span class="bold">DIV #1</span>
        <br />position: absolute;
    </div>

    <div id="flodiv1">
        <br /><span class="bold">DIV #2</span>
        <br />float: left;
    </div>

    <div id="flodiv2">
        <br /><span class="bold">DIV #3</span>
        <br />float: right;
    </div>

    <br />

    <div id="normdiv">
        <br /><span class="bold">DIV #4</span>
        <br />no positioning
    </div>

    <div id="absdiv2">
        <br /><span class="bold">DIV #5</span>
        <br />position: absolute;
    </div>
</body>

Answer 1

这是不透明度的影响＆lt; 1.0。只需评论一下：

#flodiv2 {
    /*opacity: 0.7;*/
    ...
}

您将看到正常顺序的元素。不透明度的元素＆lt; 1.0建立自己的stacking context。

Answer 2

概念似乎运作良好。你没有提到浏览器及其版本。如果涉及夜间构建，这可能很重要。无论如何。这是有效的代码。

＆＃13;

body{ background-color: rgba(0, 0, 0, .1); }
div { border: thin solid rgba(0, 0, 0, 1); width: 60%; }
#floating{ float: right; background-color: rgba(127, 0, 0, .5);}
#descendent-floating{ position: relative; background-color: rgba(0, 127, 0, .5);}

＆＃13;

<body>
    <div id="descendent">descendent</div>
    <div id="floating">floating</div>
    <div id="descendent-floating">descendent-floating</div>
</body>

＆＃13;

Here's external link for jsfiddle.

为什么定位的DIV落后于浮动DIV

2 个答案: