[英]How do I overlap two images in one DIV?
如何在一個DIV中重疊兩個圖像? 我有這兩個圖像,我想將其中一個堆疊在另一個之上
<div id="personImgDiv">
<img id="scaleImg" src="http://hddfhm.com/images/clipart-110-scale-2.gif" />
<img id="personImg" src="http://vignette4.wikia.nocookie.net/simpsons/images/6/69/The_simpsons_ralph_wiggum-1-.png/revision/latest?cb=20141124210636" />
</div>
我以為這個CSS可以做到...
#scaleImg {
position: relative;
top: 0px;
left: 0px;
}
#personImg {
position: relative;
top: 0px;
但事實並非如此。 以下是一個演示我的問題的小提琴- https://jsfiddle.net/vksLv6ew/
#personImgDiv {
position: relative; /* this is the most important bit*/
}
#scaleImg {
position: absolute;
top: 0px;
left: 0px;
}
#personImg {
position: relative; /* only set this if you want this image to overlap the other, otherwise don't */
}
為此, 容器元素應該是相對的 ,子元素必須是absolute 。
即,兒童將相對於容器具有絕對的位置。 這是對應的樣式:
#container { position: relative; } #container img { position: absolute; top: 0; left: 0; }
<div id="container"> <img src="http://hddfhm.com/images/clipart-110-scale-2.gif" /> <img src="http://vignette4.wikia.nocookie.net/simpsons/images/6/69/The_simpsons_ralph_wiggum-1-.png/revision/latest?cb=20141124210636" /> </div>
小提琴玩: https : //jsfiddle.net/npsquc6g/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.