Question

我需要你的帮助。

好吧，我正在用html和css制作一个网站，它分为几个层次，我目前的布局如下：

enter image description here

好吧，到目前为止一直很好，但是当我向下滚动页面时出现问题，这应该在向下滚动时发生：

enter image description here

然而，这种情况发生了：

enter image description here

我已经尝试了所有可能的方法来使用z-index属性，但是你无法选择文本。必须选择文本，因为会有一些表格。

这是我的实际HTML代码：

<div id="main">
    <div id="content"></div>
</div>

<div id="half-bravo-front"></div>

CSS：

#main{
    position: absolute;
    width: 1000px;
    height: 3000px;
    left: 50%;
    top: 50%;
    margin: -240px 0px 0px -500px;
    background: #414042;
    box-sizing:border-box;
}
#main #content{
    position: relative;
    float: right;
    width: 750px;
    padding: 45px 30px 30px 30px;
    box-sizing:border-box;
    z-index: 1000;
}
#half-bravo-front{
    position: fixed;
    background-image: url(http://caiokawasaki.com/trash/background-paint-interno-front.png);
    background-size: 1920px 1080px;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
}

知道该怎么做？

Answer 1

给＃half-bravo-front一个比#main更高的z-index，如果你愿意的话能够选择文本..将其添加到＃half-bravo-front：

pointer-events:none;

here's the fiddle

Answer 2

使用指针事件选择图像后面的文本：

使用此：

#half-bravo-front{
    position: fixed;
    background-image: url(../img/background-paint-interno-front.png);
    background-size: 1920px 1080px;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    pointer-events:none;  //Add this
}

Answer 3

如果您希望#half-bravo-front覆盖文本，则z-index的{{1}}高于#main。

如果您希望文字可供选择，可以pointer-events: none;使用#half-bravo-front。请注意，这不是标准属性，并且不适用于所有浏览器（主要是IE）。

Answer 4

尝试删除z-index DEMO

#main #content {
    box-sizing: border-box;
    float: right;
    padding: 45px 30px 30px;
    position: relative;
    width: 750px;
    z-index: 1000;/**remove*/
}

和其他人一样，你把这个值减去100并且这不起作用或改变那些值，但要记住那个s索引对你最近的人更有利，即总是在最顶层

CSS中的z-index层

4 个答案: