Question

我不明白为什么右边或左边浮动的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：这两个规则来纠正这个问题，但我的主要观点是：为什么当我在.footer规则中设置背景颜色或位置或两者时，浮点数位于页脚？

非常感谢！

Answer 1

在阅读这篇非常好的post时，作者在帖子结尾处讨论了z阶内部工作，但也说如果你想了解更多，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）将位于前一个元素的顶部，而不仅仅是我不添加clear: both属性在float div属性之后，或者因为最后一个属性是在浮动元素之后添加但是因为它已定位！

就像powerbuoy所说的那样，你必须设置相对于float元素添加一个位置，以便能够在浮动元素的堆栈顶部。但这还不够。因为这两个元素现在处于同一级别并且因为它们彼此交叉，所以必须告诉引擎哪一个将是第一个，这就是为什么你必须再次将z-order设置为浮动元素的PowerBuoy。

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

Answer 2

由于页脚在文本右侧之后，它将在文本右侧呈现。为了避免这种情况，您可以为文本提供z-index（以及静态以外的位置）：

http://jsfiddle.net/wxMhx/

编辑：嗯......不，这不完全正确。如果你删除position：relative;从页脚文本右侧将呈现在它上面。 TBH我不确定为什么会发生这种情况。但在任何一种情况下，解决方案是要么删除位置：相对;从页脚，或将其（以及z-index）添加到文本右侧。

Answer 3

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

div上相对位置的div

3 个答案: