CSS基础学习-12.CSS position

绝对定位

position:absolute，元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位。如果不存在这样的祖先元素，则相对于body元素，即相对于浏览器窗口。

相对定位

position:relative，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

固定定位

position:fixed，fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。并且拖动滚动条时位置固定不变。

 

 

 

总结：

position: absolute
绝对定位：是相对于元素最近的已定位的祖先元素

position: relative
相对定位：相对定位是相对于元素在文档中的初始位置

relative：没有脱离文档流，是占位的。就是在它之后的元素内容是显示在其后面，而不是叠加显示。

absolute：脱离文档流，不占位。就是在它之后的元素内容叠加显示在上面，而不是排列在其后面。

fixed：与absolute一致，唯一的区别是偏移定位是以窗口为参考，不会随着滚动条滚动。