难题叙述
想用CSS完成顶部固定不动的实际效果：
尝试margin-top加position:fixed完成，编码以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style type="text/css">
.header {
position: fixed;
height: 20px;
width: 100%;
}
.content {
margin-top: 30px;
}
.aside {
float: left;
width: 200px;
background: orange;
}
.main {
overflow: auto;
background: yellow;
}
</style>
</head>
<body>
<div class="header">123</div>
<div class="content">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
</body>
</html>
結果header沒有精准定位在顶部，而是空出了content的margin-top间距：
依照position:fixed的界定，header早已摆脱文本文档流，应当不容易遭受content合理布局危害，但結果并不是这般。
难题研究
1.content的margin-top改成padding-top：可完成预期实际效果。
2.content另外设定margin-top和padding-top：仍会空出margin-top的间距。
3.body设定padding-top：会空出body的padding-top的间距，可完成预期实际效果。
4.body设定margin-top：会空出max(body->margin-top,content->margin-top)的间距。
5.给header设定top，如top: 0;：不会受到body和content的合理布局危害。
TBD：以后填补详尽的检测编码和实际效果图(￣∇￣)...
总结
说到底是margin-top塌陷难题对position:fixed的危害。最先，针对position:fixed元素，假如不特定top，它在竖直方位上的参照原点是body盒实体模型的content的上界限。假如特定top，它在竖直方位上的参照原点才是大家常说的视窗(viewport)的上界限，left和水平方位同理。这里的参照原点是指fixed元素合理布局时的参照目标，1旦明确，就算网页页面被往下拉，body上界限上移，fixed元素部位也已不更改。其次，由于margin-top塌陷难题，设定content的margin-top后，body的content一部分会下移，即参照原点下移，因此fixed元素会空出margin-top的间距。
因此，能够从两层面处理这个难题：
1.将参照原点改成视窗：给fixed元素设定top。
2.处理margin-top塌陷难题，更多方式见正下方连接：
1）给body设定padding-top。
2）给body设定border，border色调和情况色1致。
3）给body设定position:fixed，这类会致使body的翻转条消退。
先凑合看着呀～忙过这阵来健全(允悲)(允悲)。。。
TBD：content姓名和盒实体模型content重啦待改...
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 在线网页制作_建网页_个人简介网页制作_简单网页_建立网页 版权所有 （网站地图） 粤ICP备10235580号