Question

我有一个#background和一个#content框。 #background应位于顶部，#content框的margin-top像素为X。

现在，问题在于即使#background具有position: absolute;属性，它也会遵循#content的边距。

为什么#background会受到影响？

HTML

<div id="background"></div>

<div id="content">Content</div>

CSS

#content {
    width: 200px;
    margin: auto;
    margin-top: 150px;
    background-color: Coral;
}

#background {
    width: 100%;
    height: 500px;

    position: absolute;

    background-color: AntiqueWhite;

    z-index: -1;
}

转载问题http://jsfiddle.net/GeU35/

Answer 1

所以你只需要通过top: 0;设置它的位置。请记住，您可以添加left: 0;以使其也位于左侧。无论如何你也想要。 bottom: 0;和right: 0;。

CSS：

#background {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: AntiqueWhite;
    z-index: -1;
}

DEMO HERE

Answer 2

不太确定我是否理解，但这样做会解决您的问题吗？最终将top: 0和left: 0设置为#background

#background {
    width: 100%;
    height: 500px;

    position: absolute;
    top: 0;
    left: 0;

    background-color: AntiqueWhite;

    z-index: -1;
}

Answer 3

这是一个有趣的效果，但最终你指定了绝对位置，然后没有给出任何位置信息。我相信这就是为什么它行为不端。正如其他答案中所提到的，只需设置类似top：0px就可以轻松解决它。

position：绝对遵循其他元素边距

3 个答案:

CSS：