1.什么是固定定位?position: fixed;
固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
应用场景
*{
margin: 0;
padding: 0;
}
.nav{
width: 100%;
height: 45px;
background: url("images/nav.png") no-repeat center top;
position: fixed;
top:0px;
}
.content{
width:100%;
height:8250px;
background: url("images/content.png") no-repeat center top;
}
div img:first-child{
position: fixed;
top:50%;
margin-top: -100px;
left: 0px;
}
div img:last-child{
position: fixed;
top:50%;
margin-top: -100px;
right: 0px;
}
a{
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
text-decoration: none;
line-height: 50px;
text-align: center;
background-color: rgba(0,0,0,0.3);
color: white;
}
<div class="nav"></div>
<div class="content">
<img src="images/left_ad.png" alt="">
<img src="images/right_ad.png" alt="">
</div>
<a href="#">返回</a>
![](https://img.haomeiwen.com/i1905575/8a1c6cb502c00f52.png)
网友评论