html - <header> 文本覆盖 <figure>

<分区>

这是我的代码。如何在不使用 position: absolute 的情况下使红色背景出现在图形上方？

谢谢。

article:nth-child(2) { margin-bottom: 1.5em; }

article figure { margin: 0; }

article header {
    background-color: red;
    padding: 2em 1.5em;
    margin: -5em 0 0;
    max-width: 72%;
    /*position: absolute;*/
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}

article p {
    font-size:1.4em;
    margin: 20px 0 0;
}

article p.author { font-size:1.6em; }

<article>
  <figure>
    <img src="http://lorempixel.com/600/337">
  </figure>
  <header>
    <h1>This is a feature post with a three line title</h1>
    <p class="author"><em>By <a href="#">John Doe</a></em></p>
    <p>
      <a href="#">Continue</a>
      <span>11 min read</span>
    </p>
  </header>
</article>

最佳答案

您不需要 position:absolute..您需要 position:relative 来“重置”已被负边距打乱的堆叠顺序。

article header {
  background-color: rgba(255,0,0,0.5);
  padding: 2em 1.5em;
  margin: -5em 0 0;
  max-width: 72%;
  position: relative; /* here */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

article:nth-child(2) {
  margin-bottom: 1.5em;
}
article figure {
  margin: 0;
}
article header {
  background-color: rgba(255,0,0,0.5);
  padding: 2em 1.5em;
  margin: -5em 0 0;
  max-width: 72%;
  position: relative;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
article p {
  font-size: 1.4em;
  margin: 20px 0 0;
}
article p.author {
  font-size: 1.6em;
}

<article>
  <figure>
    <img src="http://lorempixel.com/600/337">
  </figure>
  <header>
    <h1>This is a feature post with a three line title</h1>
    <p class="author"><em>By <a href="#">John Doe</a></em>
    </p>
    <p>
      <a href="#">Continue</a>
      <span>11 min read</span>
    </p>
  </header>
</article>

关于html - <header> 文本覆盖 <figure>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30219632/