站点工具

用户工具


Position 定位

正常/文档流 Normal Flow

Normal Flow 即浏览器默认的文档布局方式。

定位就是通过设置 https://developer.mozilla.org/en-US/docs/Web/CSS/position 属性的值来覆盖默认的布局方式。

静态定位

position: static 默认值 默认的布局方式。

相对定位

position: relative 相对默认的布局位置进行定位。

💡 相对定位就是“相对自己定位”。

.avatar {
  top: 3px;
  left: 7px;
  position: relative;
}

绝对定位

position: absolute 绝对定位元素脱离正常文档流,相对其定位上下文(Positioning Context)进行定位。

定位上下文 Positioning Context

定位上下文就是值绝对定位元素相对哪个元素定位,默认的定位上下文是 <html>

假如你想设定某个绝对定位元素的定位上下文,则需要在这个元素的某个祖先元素上设置 position: relative

z-index

.feedback {
  z-index: 1; 
}

固定定位

position: fixed 相对浏览器窗口进行定位。因此当滚动产生时,固定定位元素依然处于窗口的某个固定位置。

.feedback {
  right: 30px;
  bottom: 30px;
  position: fixed;
}

粘性定位

position: sticky 是相对定位和固定定位的结合。默认情况下表现为相对定位,当浏览器窗口顶端与元素的距离等于 top 属性的值时,转变为固定定位。

🌰 Macbook Pro 产品导航栏

🤔 position 属性有哪些值,它们的表现有什么不同?

参考链接

若愚 · 2021/09/23 12:02 · 前端基础_css_position定位.md.txt