контейнер-жидкость продолжает двигаться в фоновом режиме, даже если установлен zz-индекс

Question

контейнер-жидкость продолжает двигаться в фоновом режиме, даже если установлен zz-индекс

-2

Привет, ребята, я пытаюсь внедрить очень простой дизайн. Я хочу, чтобы первая часть страницы была с фиксированной позицией, а когда я прокручиваю ее, остальная часть страницы будет накладываться на нее так же, как на сайтах, таких как popcoren time, это пример сайта, который использует этот дизайн. Ну, я начал что-то строить, но это не сработает, потому что контейнер-жидкость bg всегда идет назад и не накладывает фиксированный контент. что мне удалось сделать, кроме его уродливого - я изменил цвет bg каждого из дочерних div (контейнера-жидкости) и, похоже, работает, но, как я сказал, я уверен, что это не правильный ответ.

вот мой код:

<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

misha312 03 июнь 2016, в 10:11

Источник

Теги:

twitter-bootstrap

html

css

1 ответ

Ещё вопросы

Ren Mark Almojera Cerdan · Accepted Answer · 2016-06-03T08-56-00.000Z

попробуйте изменить:

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

чтобы:

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

Отлично, это сработало ... Не могли бы вы объяснить мне, почему?
если вы установите div в относительный, это означает, что вы устанавливаете его в нормальное положение.