把div与图像重叠使用CSS

我想把div放在图像上面，如下图所示。把div与图像重叠使用CSS

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

这里是我尝试过的代码，但它没有按照我的预期工作。

这里是股利代码和图像

<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在负值和z的风格和内容相对

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

来源

2016-07-15 nethken

使用z-index，对于图像z-index：10;和div z-index：11;对于图像，你也可以把位置：绝对;顶：150像素; – bfahmi

使用'position：relative'和'z-index：10'代替'.midbar'类 –

[这个问题]（http://stackoverflow.com/questions/10322868/z-index-and-relative-absolute-positioning ）对您的问题给出了一个很好的概述 –

尝试位置，边缘-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; 
}

来源

2016-07-15 08:58:08 Suresh

.content { 
    background-color: gray; 

}

来源

2016-07-15 08:59:56

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

来源

2016-07-15 09:00:11

我希望这可以工作。

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

来源

2016-07-15 09:04:01 Lokesh

把div与图像重叠使用CSS

回答

相关问题