Question

我在javascript工作。我正面临一个问题，即我想在另一个图像上放置一个图像。我的准则如下：

<div>
  <img src="1.jpg" style="z-index:1;"/>
  <img src="2.png" style="z-index:2; left:-100px;"/>
</div>

问题是当我运行代码时，它将图像放在DIV的右下角，但不在图像上。任何帮助将不胜感激。

Answer 1

Working DEMO

在CSS中使用position: absolute：

img { position:absolute; }

<div>
  <img src="1.jpg"/>
  <img src="2.png"/>
</div>

注意：如果您希望最后一张图片显示在最顶层，则无需指定z-index。这是默认的浏览器行为。

Answer 2

您需要将position属性添加到图像样式，例如 - ＆GT;

position:relative

https://developer.mozilla.org/en-US/docs/CSS/position

此外，这不是javascript，它是CSS

Answer 3

 <div>
  <img src="1.jpg" />
  <img src="2.png" style=" left:-100px; position:relative"/>
</div>

Answer 4

尝试：

<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>

在Javascript中将图像放在另一个图像上

4 个答案: