图像在变焦时改变其他元素的位置

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）”提供高度和宽度。这样可以更好地为您的查询提供解决方案。