html - 如何在我的标题下方制作文字？

Question

我想在我的 3 张图片上方添​​加一个标题，上面写着“Staff Picks”。我不明白为什么，但出于某种原因，它位于标题下方而不是下方。请帮助我了解它的基本知识，但通常它会沉没在下面。

正文 HTML

<div class = "container_index">
<img src = "eag.jpg" width = "30%">
<img src = "thewall.jpg" width = "30%">
<img src = "em.jpg" width = "30%">
</div>

CSS

h3 {
  background-color: rgba(0,0,0,0.8);
  width: 15%;
  margin: 0 auto;
  padding: 0;
  color: white;
  font-size: 30px;
  text-decoration: underline;
  text-align: center;
  font-family: 'Raleway', sans-serif;
}

header {
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  padding: 2%;
  left:0;
  top:0;
  right:0
}

fiddle :http://jsfiddle.net/248m822a

Answer 1

从标题中删除 position: absolute; 并查看是否修复了它。通过绝对定位 header ，它会脱离可能导致重叠的文档流。

或者，你可以给你的 h3 元素一些填充/边距来补偿重叠......或者你的标题，视情况而定。