关于css中的position属性

关于css中的position属性

定义

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
（1）position：static 默认值：
当元素的position属性没有设置或者值为static时，元素处于文档流中，且left等偏移属性是不起作用的
（2）position：relative 相对定位：设置相对定位的元素仍然处于文档流中，其占据的空间仍然保留。但是如果设置了上下左右偏移属性，它会相对于原位置向相应的方向移动，此时元素空间仍存在，周围元素不会重新排列。
（3）position：absolute 绝对定位：绝对定位元素会脱离文档流（normal flow），此时其原有空间为0，也就是不存在透明砖块占位。附近元素也会重新排列。
（4）position：fixed 固定定位：固定定位元素，相对于屏幕视口定位，这种情况下不会因为滚动而改变位置。如果是打印网页，该元素会出现在每个页面中的固定位置。
（5）position：sticky 粘性定位：粘性定位是相对定位和固定定位的结合体。根据上下左右的偏移属性设置阈值。若相对定位时超过阈值会转变为固定定位。

相对定位

相对定位根据文档流中元素的初始位置加上指定的偏移量（offset）来计算元素的最终显示位置。采用相对定位的元素不影响其他相邻盒子的显示效果，即如果元素B采用了相对定位，文档流中元素B后面的元素依然根据元素B的初始位置来计算最终的显示位置，就好像元素B依然占据原来的位置并没有偏移一样。如下图，在给第二列第三行的元素应用了相对定位后，第二列第四行的元素并没有向下移动。

绝对定位

采用绝对定位的元素，其位置由left、right、top、bottom指定的偏移量和元素的包含块（containing block）来确定。什么是包含块，在绝对定位的语境下，采用绝对定位的元素，它的包含块由离他最近的使用绝对/相对/固定定位的父元素确定，具体规则参考CSS规范。采用绝对定位的元素将脱离文档流。如下图，第三行元素应用了绝对定位，脱离的文档流，第四行元素上移占据了第三行元素原来的位置。第三行元素则显示在了左上角位置。

相对定位和绝对定位的比较

从上面的分析可以看出，不管是相对定位还是绝对定位，都是根据left、right、top、bottom这四个属性设置的偏移量来定位元素的，不同的地方在于计算的参考起点不同。相对定位根据元素在文档流中的原始位置来计算最终的显示位置，绝对定位根据元素的包含块的位置来计算最终的显示位置