z-index layers in CSS

Question

I need your help.

Well, I'm making a website in html and css and it is divided into some layers, my current layout is as follows:

Well, so far so good, however when I scroll the page down the problem appears, this should happen when scroll down:

However, this happens:

I've tried all possible ways to use the z-index property, to work, however you can not select the text. And the text must be selected because there will be some forms.

This is my actual html code:

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

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

And the 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%;
}

Any idea what to do?

Answer 1

give #half-bravo-front a higher z-index than #main, AND if you want to be able to select the text.. add this to #half-bravo-front:

pointer-events:none;

here's the fiddle

Answer 2

Use pointer-events to select the text which will be behing the image:

Use this:

#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

Make #half-bravo-front have a higher z-index than #main if you want it to cover the text.

If you want the text to be selectable you can use pointer-events: none; on #half-bravo-front . Be aware this is not a standard property and will not work in all browsers (mainly IE).

Answer 4

try to remove z-index DEMO

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

as in other dvie you this value by 100 and this did not work or change those values ​​but remember that layer in whom s index is more favorable to the one closest to you ie always on top