Question

<div class="mainRunner">
    <img src="../App_Themes/Default/images/a.gif" />
    <img src="../App_Themes/Default/images/b.gif" />
</div>

我希望b.gif与a.gif重叠而不是换行 - 我怎样才能实现这一目标？

Answer 1

您必须使用定位和z-index才能使其正常工作，将图像更改为块级元素并添加类：

.mainRunner {
  border: 1px solid #000;
  position: relative;
}

.img1 {
  border: 1px solid #f00;
  position: relative;
  z-index: 2;
}

.img2 {
  border: 1px solid #0f0;
  position: relative;
  z-index: 1;
  top: -12px;
  left: 12px;
}

<div class="mainRunner">
  <img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
  <img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>

Answer 2

确保包含元素（包装div）已应用相对定位。

div.mainRunner { position:relative;}

在此之后，您可以执行以下操作之一。

为每个图像应用一个类名，以便您可以使用绝对定位映射到它。

div.mainRunner img.classname { position:absolute; top:__; left:__;}

最后将z-index应用于图像类。

div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:50;}

对于第二张图片;

div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}

如果您无法控制对图像应用类，那么请执行此操作（假设此div中只有2个图像;

div.mainRunner img.classname:first-child { position:absolute; top:__; left:__; z-index:50;}
div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}

Answer 3

你可以使用绝对定位（请不要），或使用display:inline的负边距。

Answer 4

<div style="float:right">
<svg width="338" height="104">
  <clipPath id="myContainer">
    <rect width="338" height="104"></rect>
  </clipPath>
  <image width="338" height="104" xlink:href="https://www.edoardovignati.it/wp-content/uploads/2021/06/overlap-sunset.png" clip-path="url(#myContainer)"></image>
  <image width="338" height="104" xlink:href="https://www.edoardovignati.it/wp-content/uploads/2021/06/overlap-mountain.png" clip-path="url(#myContainer)"></image>
</svg>
</div>

参考文献：https://www.edoardovignati.it/solved-overlap-images-in-html/

如何让HTML图像与另一个图像重叠

4 个答案: