为什么具有位置的元素：与未定位的同级一起固定移动？

html

SO上有很多问题涵盖了如何解决此问题的答案（添加top: 0），但没有一个试图真正解释标题运动背后的原因。我更奇怪为什么会这样。

<header>Project Header</header> 
<main class="container" id="layout-mainContent">
    <div class="row" id="first-row">somecontent</div>
</main>

header {
   position: fixed;
}

#layout-maincontent {
   margin-top: 90px;  //moves header down.
}

可以认为固定标头停留在浏览器窗口的顶部，并且不应由于另一个未定位，非子，非父div（又称为同级）而移动。Esp。因为固定的标头不在正常的文档流中。
假设：
混淆源于固定元素是相对于浏览器窗口的想法。这是正确的，但是是使用视口计算的。视口是使用常规文档流中的元素计算的。由于文档流中的第一个div是非标题div，因此视口将在应用margin-top之后启动。这只是猜测，我希望看到有人确认或纠正我。

阅读 392

共1个答案

小编典典

使用position: fixed，您的header元素将从文档流中删除。

第一个流入元素是main，它margin-top: 90px在您的代码中。

此元素的父元素是body，通常具有默认值margin:8px。

由于CSS 保证金崩溃，该body元素的margin-top: 8px被折叠与main元素margin-top: 90px。

结果，这两个现在具有相同边距的元素下移了90px。

html {

    background-color: green;

    height: 100%;

 }



body {

    background-color: pink;

    height: 100%;

}



header {

   position: fixed;

   border: 1px solid red;

}



main {

  margin-top: 90px;

  background-color:yellow;

}


<header>Project Header</header>

<main class="container" id="layout-mainContent">

    <div class="row" id="first-row">somecontent</div>

</main>

固定标头移动的原因如下：

尽管元素的包含块position: fixed是视口…
的CSS偏移性（top，bottom，left和right）具有的初始值auto，其保持在那里它通常将是如果它是在文档流动的元件。
换句话说，当您将元素设置为position: absolute或position: fixed（的另一种形式position: absolute）时，您正在指定所需的定位类型… 但是您并未将其定位在任何地方。
直到您定义元素实际定位的偏移量。
要将标题移到视口的顶部，请使用top: 0。

html {
```
background-color: green;

height: 100%;
```
}

body {
```
background-color: pink;

height: 100%;
```
}

header {

position: fixed;

border: 1px solid red;

top: 0px; / NEW /

}

main {

margin-top: 90px;

background-color:yellow;

}

Project Header
```
<div class="row" id="first-row">somecontent</div>
```

2020-05-10