使用 CSS 将 div 与图像重叠

Question

我想将 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>

这里是div的样式和内容

 .midbar{
  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;


}


.content {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: 100px; 
}
.content:after {
  content: "";
  display: block;
}

Answer 1

尝试位置相对、边距为负值且 z-index 大于 1：

.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;
}

Answer 2

.content {
    background-color: gray;

}

Answer 3

为您的 class 使用 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;
}

Answer 4

我希望这会奏效。

    <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; 
}

使用 CSS 将 div 与图像重叠

Put the div overlaping the image using CSS

html

css

css-position

overlap