Javascript 高亮显示div中的元素并将其设置在其他元素之上

我目前正在尝试编写某种滑块，某种展示。为了实现这一点，我想制作一个父div，其中包含幻灯片放映的三个元素。但我希望后面有两个元素，只有一个突出显示。大概是这样的： 橙色将是包含我的三个元素的主要div。上面的绿色将在前景中突出显示，而黑色则在背景中

我的问题：到目前为止，我唯一的方法是： 颜色的含义相同，但现在所有颜色都居中，宽度相同

一些代码片段：

HTML

一些属性（如背景或边框）仅用于测试目的

我希望你能给我一些解决办法。谢谢：）

您可以在div上应用“z-index”属性。 您可以检查此属性的工作方式。

---

例如，在您的示例中，“green div”将“z-index”属性设置为高于其他div的值（例如9，其他2个div的值为8）

这可以通过

定位div

然后使用

z-index

属性将所需的

div

放在所有div的前面来实现。

是的，我也尝试过，但值较大的div不会放在其他div的前面。不过还是要谢谢你：）你试过把位置设为绝对吗？参考

<header>
    <div class="spotlight">
        <div class="spotlight-back">
            <img src="assets\covers\large\6.jpg" />
            <img src="assets\images\testbild6.jpg" />
        </div>
        <div class="spotlight-back">
            <img src="assets\covers\large\4.jpg" />
            <img src="assets\images\testbild.jpg" />
        </div>
    </div>
</header>

header {
    background: rgba(255, 0, 0, .25);
    width: 100%;
    height: 400px;
    margin: 0;
    padding: 0;
    display: flex;
}

.spotlight {
    border: 1px solid black;
    margin: auto;
    background: rgba(30, 255, 0, .25);
    height: 85%;
    width: 95%;
    display: flex;
}

.spotlight-back {
    position: relative;
    border: 1px solid black;
    margin: auto;
    background: rgba(0, 26, 255, .25);
    height: 100%;
    width: 45%;
    display: flex;
    overflow: hidden;
}

.spotlight-back img {
    height: 100%;
}