问题描述
S.O.有很多问题。它覆盖了如何解决这个问题的答案（添加 top：0 ），但是没有人尝试实际解释标题移动的原因。我更好奇为什么会出现这种情况。
< header> Project Header< / header>
< main class =containerid =layout-mainContent>
< div class =rowid =first-row> somecontent< / div>
< / main>
header {
position：fixed;
}
＃layout-maincontent {
margin-top：90px; //向下移动标题。
}
类似问题清单，但没有推理：
似乎合理的认为固定的标题粘在浏览器窗口的顶部，并且不应该移动，因为另一个非定位，非子，非父div（也称为兄弟）。 Esp。因为固定标题在正常文档流之外。
假设：
混淆源于固定元素相对于浏览器窗口的想法。这是真的，但是使用视口计算。视口使用常规文档流中的元素计算。因为文档流中的第一个div是非标题div，所以视口在应用了margin-top之后开始。
使用 position：固定，您的头元素从文档流中删除。
-flow元素是 main ，它在代码中具有 margin-top：90px 。
这个元素的父元素是 body ，通常有一个默认值 margin：8px （请参见）。
由于CSS ，正文元素的 margin-top：8px main 元素的 margin-top：90px 。
html {background-color：green;高度：100％; } body {background-color：pink; height：100％;} header {position：fixed; border：1px solid red;} main {margin-top：90px; background-color：yellow;} < header&标题< / header> < main class =containerid =layout-mainContent> < div class =rowid =first-row> somecontent< / div>< / main>
/ p>
p>
固定标头标记的原因如下：
- href =https://www.w3.org/TR/CSS2/visudet.html#containing-block-details =nofollow>包含块，位于位置的元素：fixed 是视口...
- CSS偏移属性（ top ， bottom ， left 和 right ）的初始值为<$ c $
- 换句话说，当你将一个元素设置为 auto code> position：absolute 或 position：fixed （另一种形式 position：absolute
- 不是直到你
- 要将标题移动到视口的顶部，请使用 top：0 。
html { background-color：green;高度：100％; } body {background-color：pink; height：100％;} header {position：fixed; border：1px solid red; top：0px; / * NEW * /} main {margin-top：90px; background-color：yellow;} < header&标题< / header> < main class =containerid =layout-mainContent> < div class =rowid =first-row> somecontent< / div>< / main>
/ p>
There are a lot of questions on S.O. that cover the answer to how to fix this (add top: 0), but none of them attempt to actually explain the reasoning behind the header movement. I'm more curious as to why this is the case.
<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.
}
List of like-questions but with no reasoning:
- Topmost 'fixed' position div moving with non position div
- margin affects other fixed elements position
- margin-top div causes fixed header div to move down
It seems reasonable to think that the fixed header sticks to the top of the browser window and should not move because of another non-positioned, non-child, non-parent div (aka sibling). Esp. because the fixed header is outside of normal document flow. MDN on Fixed Positioning
Hypothesis:The confusion stems from the idea that fixed elements are relative to the browser window. This is true, but is calculated using the viewport. The viewport is calculated using elements that are within the regular document flow. Because the first div that is within document flow is the non-header div, the viewport starts after the margin-top is applied. This is just speculation and I would love to see someone confirm or correct me.
With position: fixed, your header element is removed from the document flow.
The first in-flow element is main, which has margin-top: 90px in your code.
The parent of this element is body, which normally has a default margin: 8px (see HTML default style sheet).
Due to CSS margin collapsing, the body element's margin-top: 8px is collapsed with the main element's margin-top: 90px. As a result, both elements, now having the same margin, shift down 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>The reason the fixed header tags along is as follows:
- Although the containing block for an element with position: fixed is the viewport...
- The CSS offset properties (top, bottom, left and right) have an initial value of auto, which keeps the element where it normally would be if it were in the document flow.
- Said another way, when you set an element to position: absolute or position: fixed (another form of position: absolute), you're specifying the type of positioning you want... but you're not positioning it anywhere.
- It isn't until you define the offsets that the element is actually positioned.
- To shift the header to the top of the viewport, use 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;
}<header>Project Header</header>
<main class="container" id="layout-mainContent">
<div class="row" id="first-row">somecontent</div>
</main>这篇关于为什么非定位，非子div移动固定标头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！