<div class="row" id="first-row">somecontent</div>
为什么具有位置的元素：与未定位的同级一起固定移动？
姬博瀚
问题内容：
问题答案：
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之后启动。这只是猜测，我希望看到有人确认或纠正我。
问题答案：
使用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
类似资料：
-
问题内容： 我想创建一个以动态宽度和高度为中心的弹出框。我曾经为此。没有它，则水平居中，但不能垂直居中。添加后，它甚至没有水平居中。 这是完整的设置： 如何使用CSS在屏幕上将此框居中？ 问题答案： 基本上，您需要设置div 并将其居中放置在div的左上角。您还需要将和设置为div的高度和宽度的负一半，以将中心移到div的中间。 因此，在提供（标准模式）的情况下，此操作应： 或者，如果你不关心垂直
-
我想打开一个模态层，超越身体滚动。为了实现这一点，当层被显示时，我将主体溢出设置为隐藏，溢出在模态层上滚动。从视觉上看，一个滚动条替换了另一个。 在背景中，我有一个固定位置和100%宽的顶栏。当主体溢出设置为隐藏时，100%宽度div（顶栏）占据滚动条空间，其元素向右移动。 如何防止这些元素移动？ 我试图计算（javascript）滚动条的宽度，当设置body overflow:hidden时，给
-
问题内容： 我已经有一段时间了，这似乎是一个Chrome重绘错误，尚未修复。因此，我正在寻找任何权宜之计。 主要问题是页面上的元素具有使用以下内容的背景图像时： 如果另一个元素固定并具有子视频元素，则它将导致具有背景图像的元素消失。 现在，它可以在Safari（以及Firefox和IE）中正常运行，因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。 目前，我的解决方案只是通过媒体查
-
问题内容： 我只是在学习CSS的定位。基于我发现有用的文章，我开始玩转。 使用以下代码，我无法理解为什么绝对灰盒div不在其相对父级之外。我希望灰色框位于容器的左上角。 在以下情况下，也无法理解为什么灰色框不在左上角，而是在橙色框留下的空白处之后移动。我刚刚将灰色框移到了容器div中的第二位。 我发现的所有详细文档（例如MDN）和教程仅演示了2-3个框的非常简单的示例。 问题答案： 为了正确理解这
-
我一直试图解决这个问题，并寻找可能的解决方案，但仍然没有得到正确的一个。我有这个自举的navbar和我有一个社交媒体图标固定定位。但如果我缩小屏幕，切换菜单，社交媒体图标就会出现在菜单前面。我想把它放在菜单后面。我还尝试使用并使其高于图标，但仍然相同。请看下面我的代码： null null
-
问题内容： 我试图弄清楚，即使将HTML页面的主体设置为，为什么将其设置为HTML页面的主体也会使我的元素成为现实。 在此演示中可以更好地理解效果。 这是代码： 题 和定位之间是什么关系？为什么设置该属性会导致我的元素变为而不是？ 问题答案： 元素仍然是，但是由于和框模型之间的一些相当复杂的交互，它看起来是固定的。令人难以置信的是，这些行为都不是未指定的，也不是任何浏览器中的错误- 实际上，这完全