0

В код вставил сниппет слайдера (position:relative), при этом при скролле весь контент слайдера накладывается поверх на header (position:sticky). Происходит примерно вот это. Подскажите, как решить проблему?

  #block-for-slider {
    width: 960px;
    margin: 0 auto;
}

#viewport {
    width: 100%;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-align: center;
}

#slidewrapper {
    position: relative;
    width: calc(100% * 4);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: cubic-bezier(.67,.01,.23,1);
    -o-transition-timing-function: cubic-bezier(.67,.01,.23,1);
    transition-timing-function: cubic-bezier(.67,.01,.23,1);
}

#slidewrapper, #slidewrapper ul, #slidewrapper li {
    margin: 0;
    padding-top: 10px;
}

.slide {
    min-height: 540px;
    width: calc(100%/4);
    list-style: none;
    display: inline;
    float: left;
}

.slide-img {
    width: 100%;
}

#prev-btn:hover, #next-btn:hover {
    cursor: pointer;
}

#prev-btn {
    left: 20px;
}

#next-btn {
    right: 20px;
}

#nav-btns {
    position: absolute;
    width: 100%;
    bottom: 20px;
    padding: 0;
    margin: 0;
    text-align: center;
}

.slide-nav-btn {
    position: relative;
    display: inline-block;
    list-style: none;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    margin: 3px;
}
.slide-nav-btn:hover {
    cursor: pointer;
}

.header {
position: sticky;
position: -webkit-sticky;
top:0;
width: 100%;

}

<section class="slider">
    <div id="block-for-slider">
        <div id="viewport">
            <ul id="slidewrapper" class="slider__list">
                <li class="slide slide--blue">
                   <h1 class="slider__headline"></h1>
                    <a href="javascript:PopUpShow()" class="slider-btn"></a>
                </li>
                <li class="slide slide--pink ">
                   <h1 class="slider__headline"></h1>
                    <a href="javascript:PopUpShow()" class="slider-btn"></a>
                </li>
                <li class="slide slide--grey ">
                   <h1 class="slider__headline"></h1>
                    <a href="javascript:PopUpShow()" class="slider-btn"></a>
                </li>
            </ul>
            <ul id="nav-btns" class="slider__button-list">
                <li class="slide-nav-btn"></li>
                <li class="slide-nav-btn"></li>
                <li class="slide-nav-btn"></li>
            </ul>
        </div>
    </div>
</section>

Буду очень благодарна за помощь

2
  • Вы не пробовали указать z-index?
    – makcim512
    20 июл 2019 в 0:00
  • Мало кода Вы сбросили. Не получается увидеть Вашу проблему и поискать решение
    – hisbvdis
    20 июл 2019 в 6:13

1 ответ 1

0

в .header добавьте z-index: 9 в #slidewrapper добавьте z-index: 8

По идеи, должно помочь. )

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.