CSS 几种定位方式的区别

static(静态定位)

• 默认值，设置 top，right，bottom，left 这些偏移属性不会影响静态定位的正常显示(设置这些属性没有用)。

relative(相对定位)

• 元素相对自身偏移某个位置，元素扔保持其未定位的形状，它原本所占用的空间扔保留，可以通过 z-index 进行层次分级，子元素可相对该元素进行绝对定位;

absolute(绝对定位)

• 元素从文档流完全删除(会脱离文档流)， 相对于其最近的父级块元素(如果父级元素 position 为 static 时，absolute 元素将继续向上级查找，直到找到 body，以 body 坐标原点进行定位)，元素原先在正常文档流中所占的空间会关闭，元素定位后生成一个块级框，可以通过 z-index 进行层次分级；

fixed(固定定位)

• 它所相对固定的对象是可视窗口，与其他无关，可以通过z-index 进行层次分级。

• 另外还有一个 float(浮动定位)

• 这种定位方式很简单，只需要执行一个浮动的方向(例如: float: left；就表示这个元素向左边摆放)，它的定位是 相对于父元素 容器；

注意: 如果该元素设置了浮动，后面紧邻的则会受到浮动的影响，因此需要后面的元素 ·清除浮动· (例如可以用 clear: both; 或者父元素添加 overflow: hidden 等方法)。在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放，这种定位也是会使元素 脱离文档流