Position relative div overlaps position fixed div

Question

I have a slider that works perfectly fine.

window.onload = function() {
    var wh = window.innerHeight;
    var slider = document.getElementById('slider');
    var pan = document.getElementById('pan');
    var item_wrap = document.getElementById('item_wrap').scrollWidth + wh/1.25;
    pan.style.height = item_wrap + 'px';

    window.addEventListener('scroll', function () {
        if (window.scrollY >= slider.offsetTop ) {
            slider.style.position = 'fixed'; //set position fixed
            let aa = window.scrollY - pan.offsetTop;
            document.getElementById('item_wrap').style.transform = 'translate3d(-' + aa + 'px, 0px, 0px)';   
        }
        if (window.scrollY <= pan.offsetTop) {
            slider.style.position = 'relative'; //set position relative
        }
    });
}

*{box-sizing: border-box;}
body{
    font-size: Arial;
    padding: 0;
    margin: 0;
}
.box {
    background: #ccc;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 10vw;
}

.slider {
    background: #fff;
    width: 100%;
    min-height: 100vh;
    padding: 10px 0;
    top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.item-wrap {
    display: flex;
    background: #fff;
    width: 100%;
    position: relative;
    transition: 0.5s cubic-bezier(0.05, 0.82, 0.165, 1);
}
.item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 240px;
    width: 240px;
    height: 240px;
    font-size: 800%;
    border: 2px solid #d1d1d1;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    line-height: 1;
}
.bg-tomato{
    background-color: tomato;
}
.bg-teal{
    background-color: teal;
}
.bg-thistle{
    background-color: thistle;
}
.bg-violet{
    background-color: violet;
}

<div class="box bg-tomato">Box - #1</div>
<div class="box bg-thistle">Box - #2</div>
<div class="slider" id="slider">
    <h2>Box - #3 (Slider)</h2>
    <div class="item-wrap" id="item_wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
    </div>
</div>
<div id="pan"></div>

<div class="box bg-teal">Box - #4</div>
<div class="box bg-violet">Box - #5</div>

slider.style.position has a position of fixed after scrolling to the bottom of the slider div. Box #4 and Box #5 have a position of relative. If I take away

position: relative;

from the .box CSS, my Box #4 and Box #5 disappear. I assume that's because the fixed slider div overlaps them. And if I include the position: relative Box #4 and Box #5 overlap my slider. I don't understand how this overlap works. The boxes do not have a z-index that would place them above the fixed slider div. How is a simple position: relative making my boxes overlap my slider div with a position fixed?

Position relative div overlaps position fixed div

0 Answers0