CSS 相对定位和填充

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 将成为该元素和文档顶部之间的边距，而不是第一个元素，并且第一个元素“占据”其余空间到顶部。

问题是为什么填充会这样工作？或者，换句话说，填充如何与相对定位一起使用？

Answer 1

实际上，您是在混合仓位。您的 #header 的高度为零。没错，零就像什么都没有，因为它没有相关内容。 #header-element 是绝对定位的，因为 #header 的高度为 0，所以恰好位于 padding-bottom 空间中。

因此，如果您从 #header 中删除 padding-bottom，则 #footer 会向上移动，从文档的顶部开始。由于 margin-top，文档顶部边框和“页脚”一词之间有一些空间。

但是您仍然拥有绝对定位的 #header-element，它现在就在那个 margin-top 空间中。