使用CSS

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

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