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 強制居中）；