html定位的四种状态,关于position属性的几种状态

1.static

static是position属性的默认值，即元素在文档流中正常显示，无位置的偏移。

2.relative

relative也叫做相对定位，所谓的相对定位是相对谁来定位呢。在回答这个问题之前我们首先要明白文档流的概念。

文档流为文档中可显示对象在排列中所占据的位置，从这个概念上我们可以得知文档流中不显示的对象不占据文档流。知道这个概念之后我们就可以继续解答我们的问题了。在文档流中显示的每个元素都会占据一块位置，相对定位就是相对于此元素在文档流中最初所占据的位置。即便此元素位置发生了移动但他所占据的位置并没有发生任何位置大小的改变。他还是乖乖的呆在文档流之中的,即对象原来占有的位置保留，后面的文档按照文档流仍然保持原来的位置。(可以理解为他还是在原来的位置只是看起来他的位置发生了移动)

在进行定位时需要注意的地方：

在相对定位中Left， Right， Top和Bottom属性与margin属性混合使用会产生累加效果。

3.absolute

absolute叫做绝对定位，绝对定位的元素以最近的定位祖先元素为参照物，这里说的比较模糊接下来我们仔细一类一类的细说。

(1)首先当最近祖先节点出现position：relative；时，他就相对此元素进行位置的移动(通过设置top，right，bottom，left的值)。

(2)当祖先节点出现position：absolute；时，他会相对与此元素进行位置的移动。

(3)当祖先节点出现position：fixed；时，他会相对与此元素进行位置的移动。

以上三种方法谁距离绝对定位元素最近，那么绝对定位元素就会相对于谁来定位。

(4)当元素与无祖先节点时，那么它就相对与body元素定位。

说过移动之后，我们还要说明，绝对定位的元素已经脱离了文档流。即元素从文档流中抽取出来，原来占有的位置被后面的对象顶替上来。他位置的改变并不会影响到文档流中的其他元素.

在实际运用绝对定位时注意这个坑：当一个元素只是position设为absolute，但没有设置Left， Right，

Top和Bottom，并且在他前面有一个兄弟节点时，他的左上角会和兄弟节点的左下角对齐。

在进行定位时需要注意的地方：

Left，Right，

Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。

除此之外position属性为absolute时会触发BFC(下一篇文章中会详解)，触发BFC的元素会自动清除浮动。

4.fixed

我们以简单的理解为绝对定位，他定位的参照物永远是body.

position属性为fixed时会触发BFC(下一篇文章中会详解)，触发BFC的元素会自动清除浮动。