引导程序:允许图像在DIV的顶部扩展

Question

我在获取一个图像以"溢出"其所在的div时遇到问题。

一个简单的例子：

 <div class="container callout-blue">
     <div class="row">
         <div class="col-md-6"> Some content</div>
         <div class="col-md-6"> 
             <img src="myimage.png" class="hidden-sm hidden-xs center" />
         </div>
     </div>
</div>

具有所需效果的容器div具有蓝色背景，但图像似乎溢出div的顶部。假设蓝色背景为200px高，图像为300px高，使图像的顶部100px出现在标注div上方。

Answer 1

这样更改HTML：

<div class="col-md-6 overbox"> <img src="myimage.png" class="hidden-sm hidden-xs center" /></div>

现在像这样应用你的CSS：

.overbox{position:relative;}
.overbox img{position:absolute; left:0; top:-100px;}