绝对定位元素是否受同级元素影响？含多定位类型场景

咱们先把这个问题的核心逻辑拆明白：绝对定位元素默认脱离正常文档流，不会占用布局空间，也不会被同级元素的布局空间「挤位置」，但在几个特殊场景下，会受到同级元素的影响，下面结合你的例子逐个拆解：

一、默认情况：绝对定位元素不受同级元素的布局影响 #

绝对定位元素的位置是相对于最近的非static定位祖先（比如你的Outer-Container，因为它是absolute）来计算的，和同级元素的布局没有直接关系。比如你在Outer-Container里加了无定位的greyBox，再放一个设置了top: 0; left: 0; width: 100px; height: 100px; position: absolute;的div，这个小方块会直接贴在Outer-Container的左上角，完全不管greyBox的位置和大小——这就是你原本理解的「忽略同级元素」的场景。

二、这些特殊情况会让绝对定位元素看起来受同级影响 #

1. 未指定偏移属性（top/right/bottom/left）时 #

如果你的绝对定位div没有设置任何偏移值，它会保持在原本正常文档流中的位置。比如你没给这个100x100的div加top/left，它会出现在greyBox的后方（跟随文档流顺序），看起来像是被greyBox「推」到了后面，但本质是它脱离流后保留了原本的占位位置，并非被同级元素的布局影响。

2. z-index层级堆叠冲突 #

不管同级元素是relative/absolute/static，如果它的z-index（或者堆叠上下文优先级）比绝对定位元素高，就会覆盖绝对定位元素。比如如果greyBox设置了z-index: 1; position: relative;，而你的绝对定位div没设置z-index，那么greyBox会盖在小方块上面，视觉上看起来绝对定位元素被同级元素影响了。

3. 同级元素创建了新的堆叠上下文 #

如果同级元素有transform/filter/perspective等属性，会自动创建新的堆叠上下文。这时候即使绝对定位元素的z-index更高，也可能被这个同级元素覆盖——因为堆叠上下文的层级是独立的，这也会让你觉得绝对定位元素受同级影响。

总结 #

绝对定位元素本质上不会被同级元素的布局空间影响，但在偏移未指定、层级堆叠冲突、堆叠上下文变化这几个场景下，会在视觉或位置表现上看起来受同级元素影响。

内容的提问来源于stack exchange，提问作者Chan Kwon