为何position:absolute图片无高度？block容器无法上下排列求解

嘿，咱们来一步步拆解你遇到的这两个问题，其实核心都绕不开**绝对定位（position:absolute）**的本质特性，咱们先把原理讲清楚，再给你解决方案～

你说得对，浏览器里能看到图片，但容器却没有高度，这是因为绝对定位的元素会完全脱离正常文档流。正常情况下，父元素的高度是由它内部在文档流里的子元素撑起来的，但一旦元素设置了position:absolute，它就相当于“跳出”了父元素的文档流——父元素会完全忽略这个子元素的存在，自然就不会计算它的高度，导致容器高度坍缩为0。

你补充的疑问特别好：为什么浏览器默认不考虑图片高度？这不是你误用了绝对定位，而是这个属性的设计初衷就是让元素脱离文档流，能自由地相对于父级（或其他定位元素）定位，不受文档流的约束。如果浏览器自动让父元素感知绝对定位元素的高度，那绝对定位“脱离流”的特性就不存在了，反而违背了它的设计目的。

这个问题其实是第一个问题的连锁反应：第一个.container因为内部的img和.text-left都是绝对定位，高度坍缩成了0，所以第二个.container就会紧贴着页面顶部（或者第一个容器的顶部，因为第一个容器高度为0），看起来像是两个容器重叠在了一起，而不是上下排列。

这里给你两种常用的解决思路，你可以根据需求选：

思路1：用宽高比padding撑出容器高度（适合响应式场景） #

这种方法不需要固定高度，能根据容器宽度自动计算高度，适配不同屏幕：

.container{ 
  display: block; 
  position: relative; 
  width: 100%;
  /* 假设你的图片宽高比是16:9，计算方式：(高度/宽度)*100% = 1080/1920*100% = 56.25% */
  padding-bottom: 56.25%; 
  overflow: hidden;
}
.container img{ 
  width: 100%; 
  height: 100%;
  position: absolute; 
  top:0; 
  left:0; 
  object-fit: cover; /* 保持图片比例，填满容器 */
}
.container .text-left{ 
  position: absolute; 
  top:35rem; 
  left:35rem;
  /* 加z-index确保文字在图片上方 */
  z-index: 10;
}
.container .text-right{ 
  position: absolute; 
  top:35rem; 
  right:35rem;
  z-index: 10;
}

原理是利用padding的百分比是基于父元素宽度计算的，所以padding-bottom会根据容器宽度自动生成对应的高度，图片用绝对定位填满这个空间，容器就有了高度，两个.container就能正常上下排列了。

思路2：让图片留在文档流里，只让文字绝对定位 #

这种方法更简单，适合不需要特别复杂响应式的场景：

.container{ 
  display: block; 
  position: relative; 
  width: 100%;
}
.container img{ 
  width: 100%; 
  /* 去掉position:absolute，让图片留在文档流里，撑高容器 */
}
.container .text-left{ 
  position: absolute; 
  top:35rem; 
  left:35rem;
  z-index: 10;
}
.container .text-right{ 
  position: absolute; 
  top:35rem; 
  right:35rem;
  z-index: 10;
}

这样图片在文档流里，父容器会自动计算它的高度，文字层用绝对定位覆盖在图片上方，两个容器自然就会上下排列了。

另外注意你的HTML里有个小拼写错误：.text_left应该改成.text-left（和CSS里的类名一致），不然样式不会生效哦～

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