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

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

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