写此博客以便记忆position的absolute和relative属性:
relative是相对于元素自身进行定位,并未脱离文档流,所以原来的位置还是会空着,不能被其他元素所占据。
而absolute则是脱离文档流,如果父元素position没有static以外的属性(其他属性absolute、relative、fixed属性),那么根据absolute的top、left、bottom、right则是根据html页面来定位的。如果父元素有absolute、relative、fixed属性,那么会根据父元素左上角的点来定位。
虽然absolute脱离了文档流,如果没有设置top、left、bottom、right属性,那么默认还是会根据前面的元素来进行定位,不会覆盖之前的元素;但是由于脱离了文档流,后面的元素会占据其原来的位置,如果后面的元素position属性是static,那么前面absolute的元素会在后面元素的上面;如果后面元素的position不是static(其他属性absolute、relative、fixed属性),那么后面元素就会覆盖前面的元素。