position定位的小结

所有主流浏览器都支持 position 属性。

1、static : 默认值，没有定位，元素出现在正常的文档流里

偏移属性（eg：left，top）不会生效。

2、relative：相对定位，相对于它在文档流的位置进行偏移.

在文档流中的位置仍然在，不影响其他元素的位置。

3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

绝对定位与float浮动不能同时使用.
通常是父级定义position:relative定位，
子级定义position:absolute,并且子级使用left或right和top或bottom进行绝对定位。

确定定位点

• 第一种：只给元素指定了absolute，未指定left/top/right/bottom。
  -此时absolute元素的左上角定位点位置就是该元素正常文档流里的位置

• 第二种：用户给absolute元素指定了left/right，top/bottom
  让absolute元素没有position:static以外的父元素,会根据用户指定位置的在body上进行定位

abc宽均为100px，b设absolute，left：100px，其余部分abc’同ABC

• 考虑到重绘和回流的开销，可以将动画效果放到absolute元素中，避免浏览器将render tree回流。

4、fixed： 生成绝对定位的元素，相对于浏览器窗口进行定位。