Question

position属性有哪4种取值?有何区别?

Answer 1

position属性有4种取值static、fixed、relative、absolute，其区别是：

1、static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。

2、relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。

3、absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。

4、relative：生成相对定位的元素，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留。

static（静态定位）是默认值，元素出现在正常的流中。不会受到top, bottom, left, right影响。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。

如果父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由偏移设置(top、bottom、left、right)决定；（这与relative完全一致）。