圖像重疊兩個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（垂直）

回答

相關問題