网页其实是三维结构的,除了x、y轴,它还有z轴。z轴的大小由z-index控制,默认情况下,所有元素都是在z-index: 0这一层。
元素根据自己的display类型、长度、内外边距等属性顺序排列在z-index: 0这一层里,这就是文档流。
z轴在元素设置position为absolute或relative后被激活,即设置position会让元素“浮”起来,也就是z-index值会大于0,从而改变了正常情况下的文档流。z-index的值越大,元素位置越靠上。
设置position为absolute或relative存在一定的差异。
设置position: relative会保留自己在z-index: 0层的占位,left、top、right、bottom值是相对于自己在z-index: 0层的位置,虽然它的实际位置可能因为设置了left、top、right、bottom值而偏离原来在文档流中的位置,但对其他仍然在z-index: 0层的元素位置不会造成影响。
设置position: absolute会完全脱离文档流,不再在z-index: 0层保留占位符,其left、top、right、bottom值是相对于自己最近的一个设置了position: relative或position: absolute的祖先元素的,如果组向元素全都没有设置position: absolute或position: relative,那么就相对于body元素。