如何使3个框显示在背景图像上方

Question

如何使框显示在背景图像上方。我尝试使用z-index位不起作用。

HTML

<section class="showcase">
</section>
<section class="boxes">
     <div class="box 1">          
     </div>
     <div class="box 1">          
     </div>
     <div class="box 1">          
     </div>
</section>

“ showcase”部分包含背景图片。 我将.boxes的边距设置为-40px。

Answer 1

由于没有CSS I，仅通过查看图像，我就认为问题出在盒子的背景颜色上。

这是一个我认为CSS是的有效示例：

.showcase {
  background-color: pink;
  height: 200px;
}

.boxes {
  display: flex;
  justify-content: space-around;
  margin-top: -40px;
}

.box {
  border: 2px solid salmon;
  width: 100%;
  max-width: calc((100% / 3) - 30px);
  height: 100px;
  background-color: cadetblue;
}

<section class="showcase">
</section>
<section class="boxes">
     <div class="box 1">          
     </div>
     <div class="box 1">          
     </div>
     <div class="box 1">          
     </div>
</section>

还有一个小提琴的链接：https://jsfiddle.net/x75p9mj0/

请提供更多代码（相关CSS），以便我们更好地了解问题所在。