2021-05-19

css定位和锚点

定位用来解决布局中不好解决的布局方式；

定位三要素

1. 对象：进行移动，需要定位的元素；
2. 参照物：对象相对于哪个参照物进行移动；
3. 方向：top/上 right/右 bottom/下 left/左；

定位属性：position

1. static 静态定位
2. relative 相对定位
3. absolute 绝对定位
4. fixed 固定定位
5. sticky 粘性定位
6. static 静态定位

相对定位的使用：position:relative;

参照相对于初始位置进行移动，定位是可以接负值的，相对定位是不会破坏文档流的；

作用：给绝对定位做参照物；

绝对定位的使用：position:absolute;

参照物分两种情况

1. 如果父级有定位属性，那么就相对于父级进行位置偏移；
2. 如果父级没有定位属性，那么会往上级去查，直到找到浏览器；

绝对定位会脱离文档流（注释：最好不要在大的网页布局中使用绝对定位）

固定定位的使用：position:fixed;

参照相对于浏览器位置进行位置偏移，脱离文档流；

常见各种广告、注册中使用该操作；

粘性定位的使用：position：sticky;

粘性定位是结合了相对定位和绝对定位的特点；

既不脱离文档流，也是参照浏览器位移（注释：该元素为css中新增的属性，兼容存在很多问题）

层叠属性：z-index auto/number 数字越大，优先级越高；

使用层叠属性的前提：必须要有定位属性。

通过定位的属性使元素居中的操作

1. 已知宽高大小，实现居中（首先给元素添加 相对定位position:relative 再移动其位置left:50% ；top:50%；向上移动元素高的50%，向左移动元素宽的50% ）；
2. 未知宽高大小，实现居中（首先给元素添加 绝对定位positon:fixed, 其四个方向的距离皆设置为零 再使用margin 属性 属性值为auto 强制居中）；