为什么设置position：fixed；div会消失。
此文如有不正确的地方，敬请留言指出，谢谢。
1.position:fixed;作用
生成绝对定位的元素， 相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。 例如：将id = content 的div固定在窗口底部，距离窗口左边距离200px。滚动条上下滚动，div仍然在窗口底部。
<style>
html,body,div{
margin: 0;
padding: 0;
}
body{
height: 1200px;
}
#content{
width: 400px;
height: 50px;
background: dimgrey;
position: fixed;
bottom: 0px;
left: 200px;
}
</style>
</head>
<body>
<div id="content">I am content!</div>
</body>
position:fixed; 2.当页面没用滚动条时，不设置 "left", "top", "right" 以及 "bottom" 属性时，页面排版后，目标div位于父级除去margin,padding后的最顶最左处。但此时的"left", "top", "right" 以及 "bottom" 属性仍然是根据浏览器窗口取值。
<style>
html,body,div{
margin: 0;
padding: 0;
}
#box{
margin: 20px;
padding: 20px;
height: 60px;
border:1px solid darkred;
}
#content{
position: fixed;
}
</style>
</head>
<body>
<div id="box">
<div id="content">I am content!</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.slim.min.js"></script>
<script>
console.log("content top is ",$("#content").css("top"));
console.log("content left is ",$("#content").css("left"));
</script>
</body>
3.当页面有滚动条时，不设置"left", "top", "right" 以及 "bottom" 属性时，页面排版后，目标元素“莫名其妙”消失。原因：元素的"left", "top", "right" 以及 "bottom" 属性仍然是根据浏览器窗口取值。
<style>
html,body,div{
margin: 0;
padding: 0;
}
#content{
position: fixed;
}
</style>
</head>
<body>
<div id="headerBox" style="height: 1200px; border:1px solid red;">I am headerBox!</div>
<div id="box" style="margin: 20px;padding: 20px;height: 60px;border:1px solid darkred;">
<div id="content">I am content!</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.slim.min.js"></script>
<script>
console.log("content top is ",$("#content").css("top"));
console.log("content bottom is ",$("#content").css("bottom"));
</script>
</body>
此时看一下控制台，content div的top,bottom值
综上所述，不是div消失，只是相对于窗口而取值的top,left,right,bottom，让div没有出现在窗口上。运用position：fixed；一定要抱紧“ 相对于浏览器窗口"进行定位这个条件！