position:absolute时div高度为0，元素顺序颠倒且需调整求助

首先先纠正你代码里的一个拼写错误：position:realative应该是position:relative，这个拼写错误可能会导致你设置的定位不生效，也是问题的潜在诱因之一。

问题核心原因 #

position:absolute的元素会脱离正常文档流，并且默认堆叠顺序中，定位元素（absolute/relative/fixed）的层级会高于普通流元素，所以#b会显示在#a的上方。既然不能移除position:absolute，我们可以通过调整堆叠层级来解决这个问题。

具体解决方案 #

方案1：给#a设置更高的z-index

当#a设置position:relative后会创建一个堆叠上下文，我们只需要给它设置一个比#b更高的z-index值，就能让#a显示在#b的上方：

#a{ 
  position:relative; /* 修正拼写错误 */
  background:#ef0000; 
  z-index: 1; /* 数值只要比#b的默认层级高即可，默认auto相当于0 */
}
#b{ 
  position:absolute;
  /* 你的其他样式 */
}

方案2：给#b设置负z-index（让#a视觉上覆盖#b）

如果你希望#b在#a的下方（视觉上被遮挡），也可以给#b设置负的z-index，同样需要确保#a是定位元素（relative/absolute/fixed）：

#a{ 
  position:relative; /* 修正拼写错误 */
  background:#ef0000; 
}
#b{ 
  position:absolute;
  z-index: -1; /* 负数值会让它处于#a的堆叠上下文下方 */
  /* 你的其他样式 */
}

补充说明 #

• 你写的console.log代码是用来获取元素高度的，和当前的布局堆叠问题没有直接关联，正常执行即可。
• 如果你需要#b在#a的文档流位置之后（不是仅视觉上，而是占据空间的顺序），因为absolute元素本身脱离文档流不占空间，这种情况下可能需要额外调整#b的定位坐标（比如top属性），让它的位置落在#a的下方区域，再结合上面的z-index调整实现视觉和位置的统一。

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