如何用CSS实现指定布局？HTML结构不可修改（position absolute遇阻）

基于你给出的固定HTML结构，完全可以用CSS实现需求，以下是能解决重叠问题的具体方案：

/* 第一个容器 - 黑色 */
.snippet {
  background-color: #000;
  position: relative;
  padding: 30px;
  min-width: 400px;
  min-height: 100px;
}

/* 第二个容器 - 蓝色 */
.snippet-code {
  background-color: #2563eb;
  position: absolute;
  bottom: -20px;
  left: 30px;
  right: 30px;
  padding: 20px;
}

/* 优化内部代码块样式 */
.snippet-code-html {
  margin: 0;
  color: #fff;
}

关键要点： #

• 给黑色容器.snippet设置position: relative，让蓝色容器的绝对定位以它为基准，不会脱离父容器范围导致混乱。
• 通过bottom: -20px让蓝色容器部分延伸到黑色容器外部，同时左右用left和right对齐父容器内边距，避免重叠。
• 父容器设置足够的内边距和最小尺寸，确保内部原有内容不会被蓝色容器遮挡。

如果你的目标布局是两个容器完全并排（非嵌套视觉效果），可以调整为以下方案：

.snippet {
  background-color: #000;
  display: inline-flex;
  padding: 30px;
  min-width: 200px;
  min-height: 100px;
}

.snippet-code {
  background-color: #2563eb;
  margin-left: 20px;
  padding: 20px;
  align-self: center;
}

这个方案通过inline-flex让嵌套的蓝色容器和黑色容器内容区域并排，避免绝对定位带来的重叠问题。

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