为什么设置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>
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;一定要抱紧“
相对于浏览器窗口"进行定位这个条件!