我正在使用 JavaScript。我面临一个问题,即我想将图像放在另一个图像上。我的代码如下:
<div>
<img src="1.jpg" style="z-index:1;"/>
<img src="2.png" style="z-index:2; left:-100px;"/>
</div>
问题是当我运行代码时,它会将图像放在 DIV 的右下角而不是图像上。任何帮助,将不胜感激。
position: absolute
在 CSS 中使用:
img { position:absolute; }
<div>
<img src="1.jpg"/>
<img src="2.png"/>
</div>
注意:您无需指定z-index
是否希望最后一张图片显示在顶部。这是默认浏览器行为。
您需要将位置属性添加到图像样式中,例如 ->
position:relative
https://developer.mozilla.org/en-US/docs/CSS/position
另外,这不是 javascript,它是 CSS
<div>
<img src="1.jpg" />
<img src="2.png" style=" left:-100px; position:relative"/>
</div>
尝试:
<div style="position:relative">
<img src="1.jpg" style="z-index:1;"/>
<img src="2.png" style="z-index:2; position:absolute;top:0;left:0;"/>
</div>