如何在一个 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;
但事实并非如此。这是演示我的问题的 fiddle - https://jsfiddle.net/vksLv6ew/
最佳答案
对于此行为,容器元素应该是相对,而子元素必须是绝对。
即 children 将具有相对于容器的绝对定位。这是相应的样式:
#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>
fiddle 演奏:https://jsfiddle.net/npsquc6g/
关于html - 如何在一个 DIV 中重叠两张图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48361900/