css的四种定位方式的概念记

保持对代码的热爱并保持怀疑态度

定位的几种方式

定位的属性是position ，默认值:static 为没有定位
定位有4种：
绝对定位 absolute
相对行为 relative
固定定位
粘性定位
.层级关系 z-index（可设置负值，值必须是整数）

设置定位的定位元素，可以触发5个属性

4个是移动的方向   left,right,top,bottom
1个是层级关系     z-index（可以设置负值，值必须是整数）

普通元素的层级比定位元素的层级低
后设置定位属性比先设置的定位属性的层级高
定位元素可以用z-index强制提升层级

绝对定位

positio:absolute
1.绝对定位的元素脱离文档流，不占位
2.绝对定位的元素，先找最近的定位属性的祖先元素为参照物，进行位置移动
定位属性推荐 positio:relative，所以一般配合相对定位使用，但是绝对定位也可以，副作用大，平时不咋使用
如果没有定位的祖先元素就以当前网页的位置移动的参照物
包含块—绝对定位的参照物

相对定位

positio:relative
针对自己原位置而动，脱离后原位置站位，没有脱离文档流

固定定位

positio：fixed
1.固定定位的元素脱离文档流，不占位
2.固定定位的参照物位置移动参照物是html网页**（当前网页的可视区）**

粘性定位

position ;sticky

如果设置粘性定位，不设置方向粘性定位占位，跟普通内容一样
设置内容移动，设置方向属性，滚动条划过内容，效果很固定定位一样，以浏览器窗口可视区为位置移
top和bottom的效果跟固定定位一样，以浏览器窗口可视区为位置移动参照物

left水平方向，设置就管用，top垂直方向，滚动条划过内容才有效果

注意事项 父元素的overflow；hidden对粘性定位有影响，设置后粘性定位失效

固定一直固定在一个地方，粘性可以设置移动的位置然后往回滑动还能回到原来的位置