图像重叠两个div（垂直）

我有一个网站，我正在创建，我想将图像垂直覆盖在两个单独的div上。我真的正在努力解决这个问题。图像重叠两个div（垂直）

这里是我当前的代码：

HTML

<div class="top-div">Some text</div> 
<div class="bottom-div">Some text</div> 
<img src="thisimage.jpg" alt="overlap top and bottom div" height="280" width="100" />

顶部和底部的div都具有的280像素最小高度。

来源

2016-04-21 YorkieMagento

这样做的另一种方法是把你的div和图像转换成一个单独的容器中，然后玩弄相对位置和绝对。

小提琴： https://jsfiddle.net/ewpgovvs/

代码：

div { 
 
    border: 2px solid red; 
 
} 
 
.wrapper { 
 
    position:relative; 
 
} 
 
img { 
 
    position:absolute; 
 
    width:100%; 
 
    height:100%; 
 
    top:0; 
 
    left:0; 
 
}

<div class="wrapper"> 
 
    <div class="top-div">Some text text text text text text text text text text text text text text text t text text text text text text text text text text text textext text text text text text text text text text text text</div> 
 
    <div class="bottom-div">Some text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> 
 
    <img src="http://pngimg.com/upload/cat_PNG1631.png" alt="overlap top and bottom div" /> 
 
</div>

来源

2016-04-21 09:42:42 Frits

你在找这样的事吗？您在这里不需要position，您可以使用负号margin s。但唯一的问题是你需要稍微改变标记。

.top-div, 
 
.bottom-div {min-height: 280px; background: #99f;} 
 
.top-div {background: #f99;} 
 
img {display: block; margin: -140px auto;}

<div class="top-div">Some text</div> 
 
<img src="//placehold.it/100x280" alt="overlap top and bottom div" height="280" width="100" /> 
 
<div class="bottom-div">Some text</div>

预览

来源

2016-04-21 09:39:54

图像重叠两个div（垂直）

回答

相关问题