为何添加display:block后semiHero元素仍未占据空间推下容器？

嘿，我来帮你搞定这个问题！你遇到的核心问题其实出在position: absolute上，和display: block完全没关系——绝对定位的元素会彻底脱离正常文档流，不管你设置什么display属性，它都不会占据文档流里的空间，自然没法把下面的容器推下去。

具体解决方案 #

方案1：移除绝对定位（优先推荐，除非你确实需要它） #

如果这个元素不需要脱离文档流的定位效果，直接删掉position: absolute就行，这样元素会回到正常文档流中，height: 50%和display: block就能正常生效，占据空间并推动下方容器：

.semiHero {
  background-image: url("../assets/semiHero.png");
  height: 50%;
  width: 100%;
  background-position: center;
  background-repeat: scroll;
  background-size: cover;
  /* 移除position: absolute */
  display: block;
}

⚠️ 注意：height: 50%能生效的前提是它的父元素（比如<body>或者直接父容器）有明确的高度值。如果父元素没设置高度，你得给父容器加上height: 100%，或者给html/body补全基础样式：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

方案2：保留绝对定位，但手动给下方容器腾出空间 #

如果你必须用position: absolute（比如需要让它覆盖其他元素或者做特殊布局），那你得手动给包含<hr>的容器设置顶部间距，匹配semiHero的高度：

假设semiHero的高度是视口的50%，可以给下方容器加：

.container-with-hr {
  margin-top: 50vh; /* 用视口高度单位匹配semiHero的50%高度 */
}

要是semiHero的高度是固定值（比如500px），就直接设置margin-top: 500px就行。

额外提示 #

绝对定位元素的位置是相对于最近的已定位父元素（设置了position: relative/absolute/fixed的父元素），如果没有这样的父元素，它会相对于整个视口定位。如果你的布局需要它在父容器内定位，记得给父容器加上position: relative。

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