我的图像相互重叠，我不知道为什么

Question

我正试图在我的网站上创建一个图库，当悬停在上面时，我已经将它们都设置为增大大小。唯一的问题是，即使它们的大小增加，它们旁边的图像也会显示在增加的图像的顶部。

这是HTML:

<div class="flex-con-col" style="align-content: space-around;">
<div class="flex-con-row" style="align-content: space-around">
<div>
<img src="img/socialBar.jpg" alt="" onmouseover="bigImg('galImg1')" onmouseout="normalImg('galImg1')" id="galImg1" style="height: 200px;"/>
</div>
<div style="width: 20px;"></div>
<div>
<img src="img/outside.jpg" alt="" onmouseover="bigImg('galImg2')" onmouseout="normalImg('galImg2')" id="galImg2" style="height: 200px;"/>
</div>
<div style="width: 20px;"></div>
<div>
<img src="img/socialBar2.jpg" alt="" onmouseover="bigImg('galImg3')" onmouseout="normalImg('galImg3')" id="galImg3" style="height: 200px;"/>
</div>
<div style="width: 20px;"></div>
<div>
<img src="img/socialBar.jpg" alt="" onmouseover="bigImg('galImg4')" onmouseout="normalImg('galImg4')" id="galImg4" style="height: 200px;"/>
</div>
</div>
</div>

这是我的脚本：

<script>
function bigImg(id) {
img = document.getElementById(id);
img.style.transform = "scale(2)";
img.style.transition = "transform 0.25s ease";
img.style.zIndex = "99";
}
function normalImg(id) {
img = document.getElementById(id);
img.style.transform = "scale(1)";
img.style.transition = "transform 0.25s ease";
img.style.zIndex = "1";
}
</script>  

这是我的CSS：

.flex-con-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.flex-con-col {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}

我试着增加和减少z指数，认为这会有所帮助。但没有这样的运气。

****编辑****我解决了这个问题。把这个问题留给未来的人去看。在javascript中，我必须设置div来更改z索引，而不是图片本身。解决方案：

<script>
function bigImg(id) {
img = document.getElementById(id);
par = img.parentNode;
img.style.transform = "scale(2)";
img.style.transition = "transform 0.25s ease";
par.style.zIndex = 99;
}
function normalImg(id) {
img = document.getElementById(id);
par = img.parentNode;
img.style.transform = "scale(1)";
img.style.transition = "transform 0.25s ease";
par.style.zIndex = 1;
}
</script>

Answer 1

为了防止它们重叠，请尝试将position设置为relative，我在这里看不到您的CSS，但我猜您可能将其设置为position absolute，这意味着即使旁边有另一个div，图像(或任何其他具有样式的元素(也不会移动；可以修复它。你的代码中没有任何类，所以你可以做的就是添加style="位置：相对"在图像中。然而，基于你的能力，我会让DIV的图像保持在大小调整中，并添加相对的位置，然后让图像具有宽度：100%；高度：100%。