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

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

0 голосов
/ 14 ноября 2018

У меня есть навигационная панель с абсолютной позицией и ползунок мага.Я хочу анимировать переход изображения с помощью 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: 

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

1 Ответ

0 голосов
/ 14 ноября 2018 
z-index: 1;

В моем navbar css исправлена ​​моя проблема.

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

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

Кроме того, обновлен jsfiddle: https://jsfiddle.net/tqu0n4za/1/

...