Html 使用CSS将div与图像重叠

我想将div放在图像上方，如下面的示例图像所示

这是我想做的。我只是用油漆做这个。

这是我尝试过的代码，但它没有像我预期的那样工作。

下面是div和图像的代码

 <img src="<?php echo $newsimage; ?>" alt="court" style="width:100%; height:430px;">
<div class="content">
    <div class="container">
        <div class="row">
           <div class="fix midbar">
              <div class="viewnews">
                    <h3><?php echo $title; ?> </h3>
                     <p>Date posted: <?php echo $date; ?></p>
                     <p><?php echo $content; ?></p>
              </div>
           </div>
            
        </div>
    </div>
</div>

---

尝试相对位置、负值边距和大于1的z指数：

.midbar{
      position:relative;
      margin-top:-40px;
      z-index:10;

      background:none repeat scroll 0 0 #FFFFFF;
      padding:19px;
      width: 850px;
      box-shadow: 0 0 3px #ccc;
      display:block;
      margin-left: 170px;
      margin-top:-150px;
      background-color: gray;
}

---

使用

position:relative

和

z-index:10

为您的班级。像这样：

.midbar{
      position:relative;
      z-index:10;

      padding:19px;
      width: 850px;
      box-shadow: 0 0 3px #ccc;
      display:block;
      margin-left: 170px;
      margin-top:-150px;
      background-color: gray;
}

---

我希望这能奏效

    <div class="content">
        <div class="container">
            <div class="row">        
               <div class="fix midbar">
                  <div class="viewnews">
<img src="<?php echo $newsimage; ?>" alt="court" style="width:100%; height:430px;">
                        <h3><?php echo $title; ?> </h3>
                         <p>Date posted: <?php echo $date; ?></p>
                         <p><?php echo $content; ?></p>
                  </div>
               </div>

            </div>
        </div>
    </div>
.content {
  min-height: 100%;
  margin-bottom: 100px; 
}

“alt=”court“style=”宽度：100%；高度：430px；">
公布日期：


.内容{
最小高度：100%；
边缘底部：100px；
}

唯一缺少的是位置：relative；in.midbar div@nethken@eirenaios我如何才能将您的答案标记为正确答案？@eirenaios不需要使用z-index lol。我不知道z-index是如何工作的。@此z-index是z轴中html元素的堆栈；了解更多信息@eirenaios谢谢先生：）

.midbar{
      position:relative;
      z-index:10;

      padding:19px;
      width: 850px;
      box-shadow: 0 0 3px #ccc;
      display:block;
      margin-left: 170px;
      margin-top:-150px;
      background-color: gray;
}

    <div class="content">
        <div class="container">
            <div class="row">        
               <div class="fix midbar">
                  <div class="viewnews">
<img src="<?php echo $newsimage; ?>" alt="court" style="width:100%; height:430px;">
                        <h3><?php echo $title; ?> </h3>
                         <p>Date posted: <?php echo $date; ?></p>
                         <p><?php echo $content; ?></p>
                  </div>
               </div>

            </div>
        </div>
    </div>
.content {
  min-height: 100%;
  margin-bottom: 100px; 
}