即使设置了 z-index，container-fluid 也会继续进入后台

Question

大家好，我尝试植入一个非常简单的设计。我希望页面的第一部分具有固定位置，当我滚动时，页面的其余部分将覆盖它，就像在 popcoren time 这样的网站上一样，这里是 exmple of site that uses that design 。好吧，我开始构建一些东西，但它不会工作，因为容器流体 bg 总是回到后面并且不会覆盖固定内容。 我设法做到了，但它很丑 - 我改变了每个子 div（容器流体）的 bg 颜色，它似乎正在工作，但正如我所说，我确信这不是正确的答案。

这是我的代码：

<div id="bg_1"  style="background-image:url(img/bg_1.png); background-repeat:repeat;  background-attachment: fixed;background-size: 100% 100%; width:100%;  z-index:-1; ">
    <div style=" width:100%; font-family:Alef,sans-serif; color:#FFF;position:fixed;  ">
            <div class="jumbotron" style= "background-color:transparent; text-align: center;  color:#FFF;">
              <center>  <h1>blah blah</h1> </center>
              <center><h2>blah blah blah blah</h2></center>
            </div>

    </div>
</div>

    <div class="container-fluid"  style="background-color:#CE1E1A;"><!--icon and animation area --> 
        <div class="row" >
             <div class="col-lg-10 col-lg-offset-1  col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
                 <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;  ">
                    <img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
                 </div>
                 <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
                    <img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
                 </div>
                    <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
                    <img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
                 </div>
             </div>
        </div>
        </br>
        <hr />   
    </div> <!--end of container fluid --> 

    <div class="container-fluid"  style="background-color:#CE1E1A;"><!--icon and animation area --> 
        <div class="row" >
             <div class="col-lg-10 col-lg-offset-1  col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
                 <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;  ">
                    <img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
                 </div>
                 <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
                    <img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
                 </div>
                    <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
                    <img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
                 </div>
             </div>
        </div>
        </br>
        <hr />   
    </div> <!--end of container fluid -->
    <div class="container-fluid"  style="background-color:#CE1E1A;"><!--icon and animation area --> 
        <div class="row" >
             <div class="col-lg-10 col-lg-offset-1  col-md-10 col-md-offset-1 col-xs-8 col-xs-offset-2">
                 <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;  ">
                    <img src="img/icons/re_discover.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;" dir="rtl">please help me please help me please help me</span>
                 </div>
                 <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
                    <img src="img/icons/meet_new_pl.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;">please help me</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me</span>
                 </div>
                    <div class="col-lg-4  col-md-4 col-xs-12 " style="float:right; color:#FFF; text-align:center; background-color:#CE1E1A;">
                    <img src="img/icons/peek_logo.png" class="img-responsive" style=" margin: 0 auto; margin-top:30px;">
                    <h1 style="color:#FFF;font-family:Alef,sans-serif;" dir="rtl">blah blah</h1>
                    <span style="color:#FFD2D3; font-size:16px; font-family:Alef,sans-serif;">please help me please help me please help me please help me please help me</span>
                 </div>
             </div>
        </div>
        </br>
        <hr />   
    </div> <!--end of container fluid -->

这里是一个例子：bootply

Answer 1

尝试改变：

<div class="container-fluid"  style="background-color:#CE1E1A;">

到：

<div class="container-fluid"  style="background-color:#CE1E1A;position:relative;">