CSS定位

目录

一，浮动和定位的区别：​编辑

二，定位的组成：​编辑

1，定位模式：position​编辑

（1，静态定位：（了解） 

（2，相对定位：relative（重要）

（3，绝对方位：absolute（重要）

（4，固定定位：fixed（重要）

小技巧：固定到版心右侧​编辑

（5，粘性定位：sticky（了解）

2，边偏移：

 三，子绝父相：绝对定位和相对定位的使用场景​编辑

---

一，浮动和定位的区别：

二，定位的组成：

1，定位模式：position

（1，静态定位：（了解） 

按照标准流特性摆放位置，没有边偏移。很少用

（2，相对定位：relative（重要）

元素在移动位置的时候，是相对于它原来的位置来说的。（自恋型）

 相对定位最典型的应用是给绝对定位当爹的

（3，绝对方位：absolute（重要）

元素在移动位置的时候，是相对于它祖先元素来说的。（拼爹型）

3，绝对定位不再占有原先的位置。（脱标） 

（4，固定定位：fixed（重要）

元素可以在浏览器页面滚动时位置不改变

小技巧：固定到版心右侧

（5，粘性定位：sticky（了解）

相对定位和固定定位的混合

2，边偏移：

就是定位的盒子移到最终位置

 三，子绝父相：绝对定位和相对定位的使用场景

四，定位的叠放次序：z-index

控制盒子的前后次序，防止盒子重叠。（z指☞z轴）

五，定位的拓展：

1，让绝对定位的盒子居中：

2，定位的特殊特性：

绝对定位和固定定位也和浮动类似：

3，脱标的盒子不会触发外边距塌陷

浮动元素，绝对定位（固定定位）元素的都不会触发外边距合并的问题

4，绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住下面标准流的盒子，不会压住下面标准流的盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容。

    浮动之所以不会压住文字，是因为浮动产生的最初目的是为了做文字环绕效果的，文字会围绕浮动元素。