Question

我正在尝试在用户向下滚动页面时产生效果，并且当用户滚动时，某个部分似乎固定在背景上。用户继续在该部分上滚动剩余的内容，该部分是固定的。我完成了，但问题是我无法选择文本，我假设用户无法点击任何按钮。我认为问题是z索引。它不会让我选择（突出显示）文本，因为它前面有一层？

我使用position:relative; top : 100vh来降低内容。 FIDDLE

    *{
        margin: 0;
        padding: 0;
    }
    .first, .second, .third, .fourth, .fith{
        height: 100vh;
        background: pink;
    }
    .sixth{
        height: 100vh;
        background: green;
    }
    .seventh{
        height: 50vh;
        background: hotpink;
    }
    .fith{
        z-index: -3;
        background: red;
        width: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
    }
    .box{
        background: blue;
        width: 300px;
        height: 400px;
        display: inline-block;
        margin-top: 10%;
        vertical-align: top;
    }
    .above{
        position: relative;
        top:100vh;
    }

HTML：

<div class="first">
</div>
<div class="second">secnd</div>
<div class="third">third</div>
<div class="fourth">4 fourth</div>
<div class="fith">
    fith
    <div class="box">

    </div>
    <div class="box">
        gsrgsegg
    </div>
    <div class="box">

    </div>
</div>
<div class="above">
    <div class="sixth">6</div>
    <div class="seventh">7even</div>
</div>

Answer 1

Live Demo

问题是z-index是否定的，这是一个修复：

*{
    margin: 0;
    padding: 0;
}
.first, .second, .third, .fourth, .fith{
    height: 100vh;
    background: pink;
    z-index:2;           // Add z-index for all classes
    position: relative; // Add position relative
}
.sixth{
    height: 100vh;
    background: green;
}
.seventh{
    height: 50vh;
    background: hotpink;
}
.fith{
    z-index: 0; // z-inde : Zero
    background: red;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
}
.box{
    background: blue;
    width: 300px;
    height: 400px;
    display: inline-block;
    margin-top: 10%;
    vertical-align: top;
}
.above{
    position: relative;
    top:100vh;
}

尝试使用具有较低z-index的鼠标（突出显示文本）选择div的内容

1 个答案: