一、本课目标
- 掌握固定定位属性的使用及应用场景
- 偏移位置：left、right、top、bottom
- 锐客网 body{
height: 1000px;
}
div:nth-of-type(1) {
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0px;
bottom: 0px;
}
div:nth-of-type(2) {
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0px;
bottom: 0px;
}
div1
div2
运行结果：
文章图片
image.png 【九、固定定位】分析：从结果可以看出，当给body元素设置高度之后，随着浏览器窗口右侧滑块的移动，div1的位置会滚动，而div2的位置一定不变，一直在右下角。
2.2绝对定位和固定定位的区别
文章图片
image.png
固定定位不认父级元素的定位，只认浏览器窗口。
