CSS 定位属性小记

923 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第28天,点击查看活动详情

CSS position 属性用于指定一个元素在文档中的定位方式。toprightbottomleft 属性则决定了该元素的最终位置。

该属性的可选值有 5 个,分别是:

  • static:默认值,静态定位
  • relative:相对定位
  • absolute:绝对定位
  • fixed:固定定位
  • sticky:粘性定位

通过设置非 static 的值,可以将一个 HTML 元素变为定位元素(postioned element)。

image-20221025212505363

static 静态定位

非定位元素都采用静态定位,按照标准文档流排布。

对于静态定位的元素,设置 left,right,top 和 buttom 不起作用。

relative 相对定位

元素依然按照标准文档流排布,相对元素自己原来的位置进行定位,通过属性 left、right、top 和 right 设置偏移位置的大小。

相对定位有两个使用场景,一是进行元素位置的微调,二是为绝对定位的元素提供参照物。

absolute 绝对定位

使用绝对定位的元素,脱离了标准文档流。

绝对定位的元素的参照物是最近的非 static 定位的元素,也就是最近的定位元素。如果找不到,会将视口作为参照物。

通常在使用绝对定位时,会给它的父元素设置一个 postion: relative 样式,让父元素为相对定位,子元素为绝对定位,称为“子绝父相”。

fixed 固定定位

固定定位的元素脱离了标准文档流。

固定定位的参照物是视口。当页面滚动时,固定定位的元素会保持位置不变。

固定定位适合一些元素相对窗口固定的场景,比如页面侧边的工具按钮,比如页面底部的返回顶部按钮,比如页面居中的弹窗等。

sticky 粘性定位

粘性定位是 CSS 后来推出的一个定位种类,非常好用。

粘性定位可以看作是相对定位和固定定位的一个结合体

当粘性定位元素在在目标区域以内,它表现的像是 relative 定位;在页面滚动过程中,当其距离父元素的距离达到 sticky 粘性定位设置的距离时,又表现的像是 fixed 定位,固定到此位置不再变化。

页面中的头部导航通常会使用这种定位,方便用户下拉很远之后,依然能快速使用头部的菜单等功能。

z-index 属性

该属性仅对定位元素生效,即设置了上述 relative、absolute、fixed 和 sticky 定位的元素起作用。

因为定位元素之间可能发生位置的重叠,产生遮挡,通过 z-index 属性可以设置定位元素的层叠顺序,决定谁在上显示

z-index 属性可以被设定为关键词 auto或 一个整数。

当设置为 auto 时,表示不会创建一个层叠上下文。当前层叠上下文中生成的盒子的堆叠层级和父级盒子相同。

当多个定位盒子发生层叠时,如果处于同一个层叠上下文:

  • 数值大的表示层级高,会显示在上面;
  • 数值相等的,则后面的元素的会显示在上面

如果不处于同一个层叠上下文:

  • 向上找到属于同一个层叠上下文的元素,以此为标准比较