html - 图像在缩放时改变其他元素的位置

Question

我正在制作一个页面，其中将包含一系列图像。我需要在鼠标悬停时缩放图像，并且我通过 java 脚本成功获得了它。但问题是当图像被放大时，其他图像的位置也会发生变化。我希望缩放后的图像不会改变其他图像（如谷歌图像）的位置......也就是说，我希望缩放后的图像能够覆盖旁边的图像......请提供任何帮助......提前致谢

Answer 1

您应该使用绝对定位和 z-index。

HTML

<div class="container"><img src="#" /></div>
<div class="container"><img src="#" /></div>

CSS

.container {
     position: relative;
}
.container img {
     position: absolute;
     z-index: 0;
}
.container img:hover {
     position: absolute;
     z-index: 1;
}

Answer 2

避免使用百分比来给出高度和宽度。我也经历过。而是在“像素（px）”中提供高度和宽度。这将更好地为您的查询提供解决方案。