Translate3D 重叠绝对位置元素

Question

我有一个带绝对位置的导航栏和一个法师滑块。我想用 translate3d/translateX 动画化图像过渡，图像最终与我的导航栏重叠。

保持绝对定位但将导航栏推到图像滑块前面的好方法是什么？

我的导航栏html:

<div id="navbar">
        <a id="branding" href="index.html">Hi</a>
        <img id="navbar-menu-image" src="..\Images\Menu-Icon-White.svg" alt="Menu_Icon.svg"/>
        <!-- Navigation Bar -->
        <nav>
            <ul>
                <li>
                    <a href="index.html" id='current'>Home</a>
                </li>

                <li>
                    <a href='#'>About</a>
                </li>

                <li>
                    <a href='#'>Contact</a>
                </li>

                <li>
                    <a href='#'>CV</a>
                </li>
            </ul>
        </nav>
    </div>

我的导航栏css:

#navbar
{
    position: absolute;
    width: 100%;
    transition: 0.2s ease;
}

我的图片滑块html:

<div id="image-slider">
    <img class="image-slider-images" src="..\Images\Wallpaper1.jpeg"/>
    <img class="image-slider-images" src="..\Images\Wallpaper2.jpeg"/>
    <img class="image-slider-images" src="..\Images\Wallpaper3.jpeg"/>
</div>

我的图片滑块css:

.image-slider-images
{
    width: 1920px;
    transform: translate3d(-1000px, 0px, 0px);
    height: 800px;
}

Answer 1

z-index: 1;

在我的导航栏中 css 解决了我的问题。

这是我的 css 现在的样子：

#navbar
{
    position: absolute;
    width: 100%;
    z-index: 1;
    transition: 0.2s ease;
}

此外，更新了 jsfiddle：https://jsfiddle.net/tqu0n4za/1/

Translate3D 重叠绝对位置元素

Translate3D overlaps absolute position elements

css

overlapping

translate3d