Question

我有一个带有绝对位置的导航栏和一个法师滑块。我想用transform3d / 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与绝对位置元素重叠

1 个答案: