CSS定位有哪几种？

一、定位

1. 静态定位

2. 绝对定位

3. 相对定位

4. 固定定位

5. 粘滞定位

1、静态定位

1、默认值，当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流

### 2、相对定位

相对定位的特点： 1、相对于自身原来的位置进行移动（移动的位置参考自己原来的） 2、原来在标准流中的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置） 因此，相对定位没有脱离标准流，它是典型的给绝对定位当爹的。。。

3、绝对定位

绝对定位的特点： 1、如果没有祖先元素或者祖先元素没有定位，则 以浏览器为准定位（Document文档） 2、如果祖先元素有定位（相对、绝对、固定），则以最近一级有定位的祖先元素为参考进行移动 3、绝对定位不再占有原先的位置（脱离标准流）

4、固定定位

固定定位的特点：

1. 以浏览器的可视窗口为参照一定元素

• 跟父元素没有任何关系

• 不随滚动移动

1. 固定定位不再占有原来的位置。

固定定位也是一种特殊的绝对定位

5、粘性定位

5.1定义：

粘性定位可以看成是固定定位与相对定位的混合。sticky 粘性定位的特点：

1. 以浏览器的可视窗口为参照来移动元素（固定定位的特点）

2. 粘性定位占有原来的位置（相对定位的特点）

3. 必须至少添加top、left、right、bottom其中一个才生效。

5.2定位层叠顺序z-index

• 数值可以是正整数、负整数、0，默认是auto，数值越大，盒子越靠上。

• 如果属性值相同，则按照书写顺序，后来居上

• 数字后面不能加单位（重点）

• 只有定位的盒子才有z-index属性(重点)

5.3定位特殊特性

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

1. 行内元素添加绝对定位或者固定定位，可直接设置高度与宽度。

2. 块级元素设置绝对定位或者固定定位，如果不给高度或者宽度，默认是内容的大小。

2、脱标的盒子不会发生外边距塌陷： 浮动元素，绝对定位(固定定位)元素都不会触发外边距合并的问题