CSS 图像错位

Question

我有两个 div。一个带有图像，下面一个带有背景(半透明)和文本。最后一个 div 我给 css margin-top: -25px 做一个重叠。但是第一个 div 中的图像位于半透明背景和最后一个 div 的文本之间。

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  background-color: rgba(255,0,0,0.7);
  text-align: center;
  padding: 10px 20px;
  margin-top: -50px;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
  <p>The Troll's tongue in Hardanger, Norway</p>
</div>

https://jsfiddle.net/Donslund/bsdk804p/1/

Answer 1

div.polaroid {
  position:relative;
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  z-index:1;
}

div.container {
  position:relative;
  background-color: rgba(255,0,0,0.7);
  text-align: center;
  margin-top: -37px;
  z-index:5;
  color:white;
}

<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">

<div class="container">
  <p>The Troll's tongue in Hardanger, Norway</p>
</div>
    </div>

这里它像你想要的那样重叠(我假设)。