为什么这个nav会掉下来呢？

我给#main加的margin-top啊为什么#nav会掉下来？
图片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    *{margin:0 ;padding:0}
    html, body {
        position: relative;
        height: 100%;
    }
    html{-webkit-text-size-adjust:none;}
    #nav{width: 100%;height: 50px;background-color: blue;position: fixed;z-index: 999999999;}
    #main{min-height: 100%;width: 100%;margin-top: 50px}
    </style>
</head>
<body>
<div id="nav">
</div>
<div id="main">
</div>
</body>
</html>

html

html5 css

阅读 3.8k

5 个回答

chatgpt

✓ 已被采纳

nav 作为 fixed 是根据其父元素链上第一个非 static position 的元素来定位的，
在这里会找到 body。
然后你可以看到 body 并不是沿着屏幕上边缘定位的，这是因为 body 的内容是从 #main 的内容开始的，于是当 body 的子元素 #main 有一个 margin-top 的时候，body 会拥有一个和他的子元素一样的 margin-top。
所以平时应该尽量不要给 body 的第一个子元素设置 margin-top，而是改成为 body 设置 padding-top。

如果帮到你请投 up 或者接受答案

ezmo

7.3k2633

发布于
2018-08-25

更新于
2018-08-25

一直在关注这个问题，其实BFC和Margin Collapse才是正确的方向，所采纳的答案只不过是表象-算作经验而非知识，很难推而广之。
关于BFC推荐一篇好文：理解BFC - Block formatting context
关于Margin Collapse先看一个定义

Css2.1规范：In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
中文润色一下是：所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之（合并时取其大的，不是相加）。毗邻的定义为：同级或者嵌套的盒元素（即子元素和父元素之间也可能发生这个现象），并且它们之间没有非空内容、 Padding或Border分隔。

这就是所谓的Margin Collapse， body作为普通box容器，与其下紧邻的非BFC box #main 发生margin collapse， #nav作为fixed box，默认top是auto，其值以fixed元素出现在html中的位置为准，而body因为共享了#main的margin，相当于body上沿有个padding-top，导致 #nav默认下移。

解决方案（或的关系）