css - 当容器的位置为 :relative 时， float 元素消失在背景后面

Question

我已将我的问题归结为一个非常简单的单个文件，CSS 包含在 <style> 中标签。问题是:我有一个带有透明背景的 float 右栏来显示一些文字和图片。正如预期的那样，这工作正常。

现在我想在页脚上方放置一个“Site designed by...” block 。

我想使用绝对定位 div为此，它相对于包含 #content div 的位置。 ，它必须得到 position:relative属性(property)来实现这一目标。

当我设置这个属性时， float 的右边栏消失了，似乎隐藏在#content的背景图片后面。 block 。

我找不到对此的解释。解决方法是将其相对于页脚定位(在这种情况下，#footer div 将获得 position:relative 属性)。

但我只是想了解这里出了什么问题以及为什么 float 列被隐藏了。查看不带和带相对定位内容 div 的布局链接。

可以理解，在没有相对定位的情况下，文本相对于浏览器定位在左下角。

http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html

http://websites.drsklaus.nl/relativeproblem/index_withrelative.html

Answer 1

你快到了!这里有一点帮助来完成它。

#main {
    width: 1005px;
    margin: 20px auto; /* shorthand margin for x and y axis */
    border: solid black 1px;
    /* Added background to main instead so it still covers the full background */
    background-image: url('grey-repeating-background-4.jpg');
}

#content {
    position: relative;
    min-height: 500px;
    /* made the padding here margin, made it slightly bigger to accomedate the right column */
    margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}

你的右列隐藏在内容后面的原因是，在你把 position:relative; 放在上面之前，它处于正常流中，而不是“定位”，所以 z-index 优先级确实是仅按 DOM 顺序。定位它只会让它变得更加重要；遮盖右栏。