html - 如何获得背景颜色以覆盖兄弟图像？

Question

我希望 post-text-container 的白色背景向上拉一点以覆盖图像的底部(因此 margin-top)。由于某种原因，它目前不是白色的，而是透明的。

出了什么问题？

body {
  background-color:#EEF;
}

.post-container img {
  max-width: 385px;
}

.post-text-container {
  background: #ffffff;
  padding: 15px;
  margin-top: -65px;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="post-container">
  <img src="//via.placeholder.com/350x100" alt="" id="feat-img" />

  <div class="post-text-container">

    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>

  </div>
  <!-- End post-text-container -->

</div>
<!-- End post-container -->

Answer 1

我明白你的意思了。
看起来问题是由于缺少 stacking context 引起的.

我添加了 position:relative 来创建堆叠上下文。

body {
  background-color: #EEF;
}

.post-text-container {
  position: relative; /* Added this */
  background: #ffffff;
  padding: 15px;
  margin-top: -65px;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="post-container">

  <img src="//via.placeholder.com/350x100" alt="" id="feat-img" />

  <div class="post-text-container">
    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  </div>

</div>