理解CSS定位中的position
作者:互联网
position属性建立元素布局所用的定位机制,默认值static,称作静态位置。任何元素都可以定位,CSS中的定位通常指absolute定位、fixed定位和relative定位,除了static定位外的其他定位都可以使用top, right, bottom, left
设置偏移距离,可以是正值和负值,默认值是auto。
relative
relative定位也叫相对定位,它是相对于自己原本的位置进行偏移,不会脱离文档流,也不会改变元素的类型,相对定位元素会为其所有子元素建立一个新的包含块,这个包含块对应于该元素原本所在的位置,值得注意的是当定位值为百分比时是基于包含块的宽高(不包括padding和border)。偏移距离在表象效果上,top值等于负的bottom值,left值等于负的right值,所以通常只设置top和left就可以了。
absolute
absolute定位叫绝对定位。绝对定位的元素无论其本身是什么类型都会生成一个块级框,绝对定位元素会脱离正常的文档流,定位是基于距离该元素最近的非static定位的祖父辈元素,绝对定位的元素的三大特性:
包裹性
参考例1
当绝对定位作为父元素,会为其后代元素建立包含块,若绝对定位元素不设置宽度,宽度由子元素内容撑开。绝对定位的元素不会包含后代绝对定位元素,这也在情理之中,因为绝对定位的元素拥有破坏性,造成父元素高度塌陷。
破坏性
参考例2
绝对定位后的元素会脱离文档流,因此如果父元素不设置高度,会造成父元素高度塌陷,无论父元素是在正常流还是定位流中。这种塌陷是无法修补的,只能设置固定高度。
扩展:浮动元素也能造成父元素高度塌陷,但是可以通过清除浮动解决高度塌陷这个问题
去浮动
参考例3
如果一个元素设置了浮动,元素绝对定位后浮动将失效
偏移特性
参考例4
如果用top、right、bottom、left四个偏移特性来描述四个边的位置,元素的宽度和高度将会由这些偏移进行拉伸。例如如果四边设置为0,该元素会撑满父盒子(非static定位的距离最近的祖父辈元素),如果只设置了top或left,那么bottom和right的值是auto。如果包含块设置了固定宽高,偏移量可以使用百分比。
fixed
fixed定位也叫固定定位,它是相对于视窗定位(屏幕的可视区),它和绝对定位有很多相似的地方。fixed定位也会脱离文档流元素,无论其本身是什么类型也会生成一个块级框,也具有包裹性、破坏性和去浮动性。
static
static称作静态位置,也就是元素在正常文档中原本的位置。有一点值得注意,如果元素本身是static或relative定位,当使用text-align: center
时是可以正常居中的,因为居中对齐是元素内容的中线对应父块级元素的中线,而如果使用absolute或fixed定位,就变成元素左边线对应父块级元素的中线,结果就向右偏移了。
标签:定位,元素,绝对,static,偏移,position,fixed,CSS 来源: https://www.cnblogs.com/yesyes/p/15356422.html