Question

我已将问题归结为一个非常简单的单个文件，其中包含<style>标记中的CSS。问题是：我有一个浮动的右栏，透明的背景，以显示一些文字和图片。这正如预期的那样正常。

现在我想在页脚上方放置一个“由......设计的网站”块。

我想对此使用绝对定位div，它相对于包含#content div的位置，必须获得position:relative属性才能实现此目的。

当我设置此属性时，右浮动列会消失，并且似乎隐藏在#content块的背景图像后面。

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

但我想了解这里出了什么问题，以及隐藏浮动列的原因。请参阅没有和具有相对定位内容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顺序排列。定位它只是使它变得更加重要;模糊右栏。

当容器具有位置：relative时，浮动元素在背景后消失

1 个答案: