相对位置高于 div 浮点数的 div

Question

我不明白为什么当最后一个被声明时，具有左右浮动的 div 不高于具有相对位置的 div 或用背景颜色定义的 div。

这里是html：

<html>
<body>
    <div class="container">
        Main container <br/><br/>

        <div class="header">This is the header</div>
        <div class="text-right">Right text</div>
        <div class="footer">This is the footer</div>
    </div>
</body>

这里是css：

.header {
    background-color:blue;
    border: solid;
    color: white;
    border-color:black;
    height: 100px;
}

.text-right{
    float: right;   
    border: solid;
    background-color: green;
}

.container{
    padding: 10px;  
    border: solid;
}

.footer{
    padding-top: 50px;
    border: solid;
    background-color: yellow;
    position: relative;
}

我知道我可以使用 .clear: both 规则来纠正这个问题，但我的主要观点是：为什么当我在 .footer 规则中设置背景颜色或位置或两者时，浮动 div 在页脚？

非常感谢！

Answer 1

在阅读这篇非常好的post时，作者在帖子的最后谈到了z-order内部工作，但也说如果你想了解更多，this next one will be a much more detailed article

关键是元素在z轴上的排列顺序。

作者是这样说的：

如果我们不指定任何 z-index 值，则默认堆叠顺序 从离用户最近到最远的顺序如下：

1. Positioned elements, in order of appearance in source code
2. Inline elements
3. Non-positioned floating elements, in order of appearance in source code
4. All non-positioned, non-floating, block elements in order of source code
5. Root element backgrounds and borders

我们可以看到，定位元素（1）总是在非定位元素（3-4）之上。如果我将 div 与 float 属性放在一起，则该元素将不会“定位”到表面上。

在这种情况下，第二个元素，我的页脚div，使用相对属性值定位将位于前一个元素的顶部，而不仅仅是我没有在@987654331 之后添加clear: both 属性@div属性还是因为最后一个加在浮动元素之后但是因为是定位的！

就像powerbuoy说的，你必须设置添加一个相对于浮动元素的位置，才能将浮动元素放到栈顶。但这还不够。因为这两个元素现在处于同一水平并且因为它们都相互交叉，所以您必须告诉引擎哪个将是第一个，这就是为什么您必须再次将 z-order 设置为 1 到浮动元素，就像说的那样动力浮标。

我不是一个很好的作家，因此，我强烈建议您阅读我之前提到的参考文章。我想你会对这个案子有一个非常深刻的解释。

Answer 2

由于页脚位于 text-right 之后，它将呈现在 text-right 的顶部。为了避免这种情况，你可以给 text-right 一个 z-index （和一个静态以外的位置）：

http://jsfiddle.net/wxMhx/

编辑：嗯……不，这并不完全正确。如果您删除位置：相对；从页脚 text-right 将呈现在它上面。 TBH 我不确定为什么会发生这种情况。但是在这两种情况下的解决方案都是删除 position: relative;从页脚，或将其（以及 z-index）添加到 text-right。

Answer 3

因为position: relative。如果删除此行，您将看到 div 和 text-right 类。您可以将z-index: -1; 设置为footer 类，这应该也可以。