Question

经过几个小时后，我设法找到解决问题的方法，所以问题不是“如何”，而是“为什么它会像那样”。这是我剥离的例子：

<div id="header">
    <div id="header-element">header</div>
</div>
<div id="footer">footer</div>

CSS：

#header {
    width: 100%;
    position: relative;
    padding-bottom: 5%;
}
#header-element {
    position:absolute;
    bottom: 0;
}
#footer {
    position: relative;
    margin-top: 5%;
}

并且jsFiddle - http://jsfiddle.net/H7jwm/3/。

我的问题是如何使用百分比来定位那些相对定位的元素，首先是文档顶部的一些，而第一个是第一个。我已经通过将padding-bottom提供给第一个，以及margin-top提供给第二个实现了这一点，但我已经蛮力地解决了这个问题 - 尝试了每个远程逻辑解决方案。现在，如果删除填充，第二个元素的margin-top将成为该元素与文档顶部之间的边距，而不是第一个元素，并且第一个元素将“剩余的空间”带到顶部。 / p>

问题是为什么填充这样的工作原理？或者，重新说一下，填充如何与相对定位一起工作？

Answer 1

实际上，你正在混合职位。您的#header高度为零。没错，因为它没有相对内容。 #header-element绝对定位，因为#header的高度为0，恰好位于填充底部空间。

因此，如果从#header移除填充底部，#footer会向上移动，从文档顶部开始。由于边缘顶部，文档顶部边框和单词“页脚”之间有一些空格。

但是你仍然拥有绝对定位的#header-element，现在它位于该边距顶部空间。

CSS相对定位和填充

1 个答案: