写此博客以便记忆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属性),那么后面元素就会覆盖前面的元素。
本文详细解析了CSS中position属性的relative与absolute两种定位方式的区别。relative定位相对于元素自身位置偏移,但不脱离文档流;而absolute则完全脱离文档流,根据最近的非static定位祖先元素进行定位。
2513

被折叠的 条评论
为什么被折叠?



