边距影响其他固定元素的位置答案

【问题标题】：margin affects other fixed elements position边距影响其他固定元素的位置
【发布时间】：2012-03-08 21:20:42
【问题描述】：

我想在一个固定位置设置一个顶部标题并在其下方滚动内容，但遇到了一些奇怪的问题。如果我为内容 div 设置了一个 margin-top，即使它设置为 position:fixed，margin 也会影响标题并将其向下移动。我通过将内容 div 设置为 position:relative 并使用 top: 将其偏移相同的数量找到了一种解决方法，但我觉得奇怪的是非嵌套 div 会影响固定位置的元素并且想知道它为什么会发生.

我在 Safari、Firefox 和 Chrome 中得到了同样的结果。在 Opera 中，margin 会压低内容并将标题留在原处，这是我所期望的，但与其他结果相比，可能是 Opera 出错了。我所说的可以在this JSFIDDLE 中看到（不要使用 Opera！:)）。

代码如下：

css:

body {
    background:#FFD;
}

#header {
    position:fixed;
    height:15px;
    width:100%;
    text-align:center;
    border-bottom:1mm dashed #7F7F7F;
    background-color:#EEE;
}

#content {
    width:90%;
    margin-top:25px;
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E5FF;
    border: 1px solid #000;
}

html:

<body>
    <div id="header">
        HEADER
    </div>
    <div id="content">
        <p>Text1</p>
        <p>Text2</p>
        <p>Text3</p>
        <p>Text4</p>
    </div>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

#header {
    top: 0px !important;
}

【讨论】：

!important 不是必需的。
错过这一点真是太尴尬了。谢谢！不过，将相同的边距应用于非后代元素还是有点奇怪，你不觉得吗？
虽然这个修复确实有效。它没有解释内容和标题一起移动的原因。
这里有一个类似的问题可以回答为什么@seron：stackoverflow.com/questions/38679945/…

【解决方案2】：

#content 是固定位置，但您为top、right、bottom 和left 设置的坐标是相对于其父容器：#header。换句话说，#content 总是固定在#header 的顶部。由于您正在使用margin 来降低#header，因此#content 将随之而来。

你要么需要抵消边距

#content { position: fixed; top:-25px; }

也就是说，我假设你想在屏幕顶部修复一些东西，我认为这不会让你得到你想要的。您需要将#content 从#header 中分离出来，或者使#header 静态定位：position:static，以便内容固定到窗口顶部，而不是标题。

【讨论】：

【解决方案3】：

或者将#content 的上边距（而不是上边距）设置为#header 的高度。

我们已经找到了正确定位标题的方法，但我仍然很好奇为什么首先会发生偏移。

【讨论】：

【解决方案4】：

我相信您正在感受到“margin collapse”的影响，这导致您在“content”中的“margin-top”条目折叠到页面的正文元素中。一个简单的解决方法是只围绕“内容”和“标题”创建一个包含 div，并将 CSS 设置为“溢出：隐藏”。然后，确保将“body”元素的边距和内边距设置为 0。

【讨论】：

从我读到的边距折叠边距没有出现，而不是相反。无论如何，正如 Zenbait 所指出的那样，“top: 0px”做到了。
@seron 我认为您所读到的关于边距折叠的内容是不正确的。边距折叠使用两个值中较大的一个来设置边距，这与使边距不出现完全相反。有关这如何导致您描述的问题的更详细说明，请参阅 this thread。