九、固定定位

一、本课目标

  • 掌握固定定位属性的使用及应用场景
二、fixed属性值
  • 偏移位置:left、right、top、bottom
2.1示例代码:
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
固定定位不认父级元素的定位,只认浏览器窗口。

    推荐阅读