如何在div容器内嵌套div容器？定位异常问题求助

嘿，我来帮你搞定这个问题～ 你遇到的核心问题是两个div都用了position: absolute，绝对定位的元素会完全脱离正常文档流，外层的.info因为没有被文档流里的内容撑开（内层的.info-header已经脱离了），所以它的高度会变成0，看起来就像两个div是并列的，而不是嵌套的。

问题原因拆解 #

• 当元素设置position: absolute后，它会从文档流中“跳出来”，不再占据原本的空间
• 外层的.info没有设置明确的宽高，也没有其他文档流内的内容撑住它，所以它的尺寸会收缩到最小（几乎看不见）
• 内层的.info-header虽然写在.info里面，但因为都是绝对定位，它会相对于页面（或最近的非static父元素，但外层的absolute本身也脱离流，最终还是相对于视口）定位，看起来就和外层分开了

解决方案 #

根据你的需求（外层可自由定位，内层嵌套其中），有两种常用的处理方式：

方式1：外层保持绝对定位，内层用相对定位（或默认static）

如果不需要内层脱离文档流，只需要外层可以自由定位，把内层的position: absolute去掉，改成默认的static或者relative就行。这样内层会留在文档流里，撑开外层的尺寸，外层的绝对定位也能正常工作：

<div class="info"> 
  <div class="info-header"> ss </div> 
</div>

div.info { 
  position: absolute; 
  background: yellow; 
  /* 可根据需求设置定位属性 */
  top: 20px;
  right: 20px;
} 
div.info-header { 
  /* 去掉absolute，用默认static或改成relative */
  position: relative; 
  background: green; 
  padding: 10px; /* 加padding方便查看效果 */
}

方式2：内层保持绝对定位，但外层设置明确尺寸，且内层相对于外层定位

如果你需要内层也用绝对定位（比如要把它放在外层的某个角落），那么需要确保外层的.info有明确的宽高，同时内层的定位会相对于外层生效：

<div class="info"> 
  <div class="info-header"> ss </div> 
</div>

div.info { 
  position: absolute; 
  background: yellow; 
  top: 20px;
  right: 20px;
  /* 设置明确宽高，让外层成为可定位的容器 */
  width: 200px;
  height: 150px;
} 
div.info-header { 
  position: absolute; 
  background: green; 
  /* 现在内层会相对于外层.info定位 */
  top: 10px;
  left: 10px;
  padding: 8px;
}

这样修改后，内层的.info-header就会嵌套在.info里面，不会再和外层并列啦～

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