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

Question

我目前正在尝试编写某种滑块和某种展示柜。为了达到这个目的，我想制作一个父div，其中包含我的幻灯片演示的三个元素。但我想在后面放两个元素，只突出一个。像这样的东西： Orange将是包含我的三个要素的主要div。绿色亮在前景中突出显示，黑色亮在背景中。

我的问题：到目前为止，我唯一的方法是这样的： 颜色的含义相同，但现在全部居中且具有相同的宽度。

一些代码段：

HTML

<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>

CSS

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%;
}

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

我希望您对我有某种解决方案。谢谢：）

Answer 1

您可以在div上应用“ z-index”属性。 您可以检查here此属性的工作方式。 例如，在您的情况下，“绿色div”的“ z-index”属性设置为高于其他div的值（例如9，而其他2的值为8）

Answer 2

这可以通过z-index，然后使用div属性将所需的{{1}}放在首位来实现。