css各种定位的对比

在css中一共有5个定位模式：static静态定位、relative相对定位、absolute绝对定位、fixed固定定位、sticky粘性定位。

定位的组成：定位模式+边偏移（即top、bottom、left、right）

1.static静态定位：（不常用）

特点：不能使用边偏移，且在使用定位时不会“脱标”，符合标准流的布局特点。静态定位是元素的默认定位，是无定位的意思。

2.relative相对定位：（常用）

特点：相对自身位置的定位模式，在使用定位后不会“脱标”，仍然保留原先的位置。

3.absolute绝对定位：（常用）

特点：相对最近且带有定位的祖父元素的定位模式（如果没有有定位的祖父元素，以浏览器窗口为基准），使用定位后会“脱标”，不再占有原先的位置。

常常relative和absolute配合使用，俗称“子绝父相”，即父元素使用相对定位以保持占有原先的位置，子元素使用绝对定位浮动在父元素 中的任意位置，并不会影响下层的元素。

4.fixed固定定位：（常用）

特点：相对于浏览器可视窗口的定位模式，使用后会“脱标”，相当于一种特殊的绝对定位。

5.sticky粘性定位：（不常用）

特点：相对于浏览器可视窗口的定位模式，使用后不会“脱标”。（必须指定top，bottom，left，right中的任意一个值才会生效）。