样式（一）-定位

CSS的position 属性用于指定一个元素在文档中的定位方式

语法	说明
position: static;	不开启定位 默认
position: relative;	相对定位
position: absolute;	绝对定位
position: fixed;	固定定位
position: sticky;	粘带定位

设置为定位之后，偏移量的设置参数

语法	说明
top	定位元素和定位位置的上边距离
bottom	定位元素和定位位置的下边距离
left	定位元素和定位位置的左边距离
right	定位元素和定位位置的右边距离

相对定位

相对定位只会移动自身的布局位置，不会对已存在的其他元素产生影响

特点：
1.相对定位是参照于原始位置进行定位的
2.相对定位之后 可以覆盖其他元素
3.相对定位不会改变元素的性质：块还是块 行内还是行内
4.开启相对定位之后，如果不设置偏移量，元素看起来是没有变化的

绝对定位

开启绝对定位后，元素会从文档流脱离，脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
当父级元素的position全是static的时候，absolute是相对于html来进行定位的。
脱离文档流之后就不占用位置了，可以看起来是浮起来了
开启定位就是position不是static

特点：
1.绝对定位会改变元素的性质，行内元素变成块元素
2.绝对定位会是元素从文档流脱离

固定定位

固定定位是一种绝对定位，固定定位永远参照于浏览器的视口进行定位，不随网页的滚动条滚动

粘带定位

类似固定定位

滚动条向下移动之后

层级补充
CSS z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。

层级越高的元素优先展示