html - 为什么 Z-Index 属性不能正确定位这个 DIV？

Question

我有一个 div，我想将它放在旁边的 div 上。

div 是兄弟。我想移到顶部的 div 中有一个 iframe 而第一个已经正确定位的 div 有一个 img 在里面。

我已使用“相对”属性定位了 img div，并为其指定了 -1 的“z-index”。

然后我将 iframe div 设置为 img div 上的“margin-right”，但它不起作用。

我已经尝试设置要定位的 iframe div，但即使那样也没有用。

<div class="imagecontainer">
<img class="image" src="images/folder-number.png">
</div>

<div class="video">
<iframe width="300" height="169" src="https://www.youtube.com/embed/_xxxxxxxx_w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.image {
    width: 32vw;
    height: auto;
    z-index: inherit;
}
.imagecontainer {
    display: inline-block;
    margin-left: 12vw;
    position: relative;
    z-index: -1;
}
.video {
    display: inline-block;
    margin-right: 5vw;
}

我希望 iframe div 只是在 img div 上方滑动一点，但它根本不会移动。

Answer 1

在“video”类中使用“margin-left”属性中的负值代替“margin-right”可以正常移动 iframe div。