Question

我想在固定位置设置一个顶部标题，并在其下方滚动内容并遇到一些奇怪之处。如果我设置一个margin-top到内容div，那么边距也会影响标题并将其向下移动，即使它设置为position：fixed。我找到了一个解决方法，通过将内容div设置为position：relative并使用top：来抵消它相同的数量，但我发现很奇怪，非嵌套div可以影响固定位置的元素，并想知道它为什么会发生

我在Safari，Firefox和Chrome中得到了同样的东西。在Opera中，边缘按下内容并将标题留在原位，这正是我所期望的，但与其他结果相比，可能是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>

Answer 1

#header {
    top: 0px !important;
}

Answer 2

#content是固定位置，但您为top，right，bottom和left设置的坐标是相对于其父容器的坐标：{ {1}}。换句话说，#header始终固定在#content的顶部。由于您使用#header向下突破#header，margin将会跟随。

您需要抵消保证金

#content

那就是说，我假设您想要将某些内容修复到屏幕顶部，我认为这不会让您得到您想要的内容。您需要将#content { position: fixed; top:-25px; }从#content中删除，或者使#header静态定位：#header，以便内容固定在窗口顶部，而不是标题

Answer 3

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

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

Answer 4

我相信你会感受到“保证金崩溃”的影响，这会导致“内容”中的“保证金最高”条目进入页面的正文元素。一个简单的解决方法是在“content”和“header”周围创建一个包含div，并将CSS设置为“overflow：hidden”。然后，确保将“body”元素的边距和填充设置为0。

保证金影响其他固定元素头寸

4 个答案: