Translate3D перекрывает элементы абсолютной позиции

У меня есть панель навигации с абсолютным положением и ползунок мага. Я хочу анимировать переход изображения с помощью translate3d / translateX, изображение в конечном итоге перекрывает мою панель навигации.

Быстрый пример: https://jsfiddle.net/tqu0n4za/

Какой хороший способ сохранить абсолютное позиционирование, но переместить панель навигации перед ползунком изображения?

Моя панель навигации 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;
}

css overlapping translate3d
person helloworld123    schedule 14.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

z-index: 1;

В моей навигационной панели css исправила мою проблему.

Вот как сейчас выглядит мой css:

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

Также обновлен jsfiddle: https://jsfiddle.net/tqu0n4za/1/.

person helloworld123    schedule 14.11.2018