#定位元素

预计阅读时间: 3 分钟

#定位类型

类型	描述
static	默认值，元素正常在文档流中，会忽略 top、bottom、left、right 或者 z-index等属性
relative	元素可以使用的顶部，底部，左侧和右侧属性定位
absolute	寻找 最近有定位(非 static ) 通过 top、bottom等属性进行定位
fixed	相对于可视窗口固定定位
sticky	相对定位和固定定位相结合，如果元素并不脱离文档流，仍然保留元素原本在文档流中的位置；当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置；需要指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效，反之与相对定位相同

#定位失效

fixed失效

定位的基准元素发生改变，此时任何非 none 的 transform 值都会导致一个堆叠上下文和包含块的创建。

创建堆叠上下文的方式(参考自 MDN):

• 根元素 (HTML)
• z-index 值不为 "auto"的 绝对/相对定位
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item), 即: 父元素 display: flex|inline-flex
• opacity 属性值小于 1 的元素（参考 the specification for opacity）
• transform 属性值不为 "none"的元素
• mix-blend-mode 属性值不为 "normal"的元素
• filter值不为 "none" 的元素
• perspective值不为 "none" 的元素,
• isolation 属性被设置为 "isolate"的元素
• position: fixed
• 在 will-change 中指定了任意 CSS 属性, 即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性被设置 "touch"的元素
• backdrop-filter 值不为 "none" 的元素

解决办法

• 添加 transform: unset

#脱离文档流

文档流 指窗体元素自上而下一行一行，并在每行中从左至右以此排放元素，也叫普通流动。

脱离文档流 指 元素不再在文档流中占据空间，而是处于浮动状态

方式：

1. float
2. absolute
3. fixed