Position属性 - 占位?相对什么定位?

Posted by CodingWithAlice on June 26, 2021

Position属性 - 占位?相对什么定位?

直接参考 :MDN 介绍

Position有五个属性值,分别是static 、fixed、 relative 、absolute、『sticky』;

static relative absolute fixed sticky
默认属性,让定位的元素恢复到正常文本流中 相对定位;相对于自己本身的定位,一般是和absolute属性值一起用 绝对定位;相对于父级元素的定位,如果没有父级元素时相对于窗口(<html>元素)的定位; 固定定位,fixed是相对于window窗口/视口的定位 粘性定位,允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点为止,此后它就变得固定了
比如,在媒体查询页面当中,正常页面当中需要给元素加position属性,但是在响应式页面中不需要,这是就只能用position:static;无论页面如何滚动,这个盒子显示的位置不变。 相对定位不会破坏元素的文本流,但是会改变元素的视觉效果 绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要设置display:block就可以设置宽、高了 例如置顶、侧边广告、顶部导航等 移动到某一位置展示
不会破坏元素的文本属性 不脱离标准流 脱离标准流,有float的效果; 脱离标准流,有float的效果 跨越特定阈值前为相对定位,之后为固定定位

子绝父相意义:这样可以保证父亲没有脱标,儿子脱标在父亲的范围里面移动。

只有定位了的元素,才能有z-index值。也就是说,不管相对定位relative、绝对定位absolute、固定定位fixed,都可以使用z-index值,不设置z-index则取默认的auto0。而浮动的元素不能用。