CSS 定位总结

CSS 有三种基本的定位机制：普通流、浮动和绝对定位，但本篇文章要总结的是CSS中的position属性，position有四个值，static,absolute,relative,fixed。

相对定位 relative

生成相对定位的元素，相对于其正常位置进行定位，它原本占据的空间流仍然存在。当使用left、top、right、bottom偏移时起始计算点为外边距最外层，偏移后的元素不占据空间流，对后面的元素排版不受影响，但会覆盖后面的元素。

绝对定位 absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，它原本占据的空间流不存在了。这里特别要注意的是决定定位是相对于谁进行定位的，如果绝对定位的元素父元素不是fixed，absolute，relative中任何一种，则不相对于父元素定位，而是继续往上查找，直到其中一个父辈元素的position属性不为static为止，如果没找到，则相对于浏览器屏幕左上角定位，而不是相对于body或者html定位，那为什么网上会有人说相对于body或者html定位呢，那是因为当left，right，top，bottom值不设置的时候，left和top会自动计算使其看起来像相对于body定位的，也就是不偏移了。比如给html和body设置margin:20px，那么绝对定位的元素left和top自动计算为40px，如果设置绝对定位元素的left和top为0，则绝对定位元素就跑到屏幕左上角了。

如果绝对定位的父元素position属性为relative，那么就相对于父元素定位，父元素设置了margin和padding以及border属性后，绝对定位是相对于父元素的内容+padding开始定位的，不包括margin和border。

固定定位 fixed

生成绝对定位的元素，相对于浏览器窗口进行定位，固定定位是绝对定位的一种特殊定位，只不过相对于浏览器窗口定位而无论父元素是什么定位。固定定位一般用于模态框和固定在屏幕右下角的返回顶部按钮。