如何在 2 div 中间叠加一个 div

Question

我有一个div

<div id="showMore">

我可以像这样将它覆盖在背景上

#showMore {
width: 100%;
height: '69.9%; */ I had to cut the bottom of, so that I can reach player buttons */
position: absolute;
top: 0;
left: 0;
background': rgba(0, 0, 0, 0.5);
font-size: 450%;
}

但问题是我还有一个 div 然后被覆盖了，我无法点击它的按钮

<div id="audio-container">

所以我想将 <div id="showMore"> 覆盖在 body 上，但不覆盖 <div id="audio-container">

已更新以包含示例 此处示例：https://jsfiddle.net/rcdnzabf/（如您所见，叠加文本应覆盖一些随机文本，而不是测试按钮）

Answer 1

检查以下代码：

<div>
    <div id="showMore">
    
    </div>
   
    <div id="audio-container">

    </div>
</div>

Answer 2

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
  margin:0;
}
.bgimage{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: url(https://images.pexels.com/photos/1324803/pexels-photo-1324803.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) no-repeat center;
}
.overlay{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:1;
  background-color:rgba(0,0,0,0.5);
}
h1{
  position:relative;
  z-index:2;
}

<div class="bgimage">
</div>
<div class="overlay">
</div>
<h1>Title Goes Here</h1>

您可以使用 z-index css 管理 div 上升和下降位置。请查看上面的现场演示。

如何在 2 div 中间叠加一个 div

How to overlay one div in the middle of 2 divs

html

css

overlay