03.固定定位
当元素的position属性设置fixed时,则开启了元素的固定定位
(1)用于固定在浏览器页面上,不随浏览器的滚动而改变位置;
(2)以浏览器为参照物,和父元素没有任何关系;
(3)固定定位不占有原来的位置,即脱离标准流 ,更改元素的性质
(4)应用场景
- 固定导航
- 固定侧边栏
- 广告
04.粘滞定位
粘滞定位 (一般用于页面导航的吸顶效果)
-当元素的position属性设置为sticky时,则开启了元素的粘滞定位
(1)以浏览器为参照物(体现固定定位特点);
(2)占有原来位置(体现相对定位特点),不会脱离文档流,元素性质也不会发生变化;
(3)粘滞定位可以在元素到达某个位置时,将其固定
(4)配合top值设置,没有达到top值之前正常显示,随着滚动条滚动而滚动,
达到top值之后类似于固定定位,不会跟随滚动条滚动而滚动
05.绝对定位元素布局
水平方向9个值相加必须要等于父元素的内容的宽高,否则浏览器就会自动调整,这个过程
还是叫过渡约束
left+margin-left+border-left+padding-left+width+padd