位置固定支持父母絕對

-1

我有一個有趣的問題。 CSS屬性的位置，值固定，據說是相對於瀏覽器窗口。然而，不管怎樣，在這個代碼中，當滾動時，它堅持父母，這是絕對的。如何和爲什麼？位置固定支持父母絕對

HTML：

<section> 
    <div class="container"> 
    <div class="wrapper"> 
     <div class="content"> 
     <div class="bar">  
     </div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a quam ultrices libero convallis consequat eget non eros. Proin in velit ullamcorper, tristique leo id, tempus ipsum. Mauris in nisl at tortor vulputate dictum. Morbi at leo non ante euismod gravida ut sit amet massa. Suspendisse potenti. Fusce nec ultricies arcu. Sed at nunc turpis. Vivamus suscipit eu mi mollis tempor. Nullam ut urna libero. Duis finibus egestas erat, non faucibus sem placerat a. Curabitur sollicitudin porttitor urna, a eleifend diam ultrices non. Praesent lacus lectus, volutpat scelerisque lacus quis, vehicula eleifend dui. Praesent eget est magna. Sed faucibus tellus diam, commodo ultricies ipsum pulvinar et. Phasellus nec blandit tortor, eget facilisis tellus. Nulla vitae ornare neque. 
     </div> 
    </div> 
    </div> 
</section> 
<section> 
    <div class="container"> 
    <div class="wrapper"> 
     <div class="content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a quam ultrices libero convallis consequat eget non eros. Proin in velit ullamcorper, tristique leo id, tempus ipsum. Mauris in nisl at tortor vulputate dictum. Morbi at leo non ante euismod gravida ut sit amet massa. Suspendisse potenti. Fusce nec ultricies arcu. Sed at nunc turpis. Vivamus suscipit eu mi mollis tempor. Nullam ut urna libero. Duis finibus egestas erat, non faucibus sem placerat a. Curabitur sollicitudin porttitor urna, a eleifend diam ultrices non. Praesent lacus lectus, volutpat scelerisque lacus quis, vehicula eleifend dui. Praesent eget est magna. Sed faucibus tellus diam, commodo ultricies ipsum pulvinar et. Phasellus nec blandit tortor, eget facilisis tellus. Nulla vitae ornare neque. 
     </div> 
    </div> 
    </div> 
</section>

CSS：

section { 
    width: 100%; 
    display: block; 
    max-width: none; 
    height: 100vh !important; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    position: relative; 
} 

section .content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
} 

section .wrapper { 
    max-width: 770px; 
    margin: 0 auto 50px; 
    text-align: center; 
    padding: 0 25px 50px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.bar { 
    display: block; 
    width: 100%; 
    height: 30px; 
    background: #00aeef; 
    margin-bottom: 40px; 
} 

.bar.fixed { 
    position: fixed; 
    top: 0; 
}

的jQuery：

$(window).scroll(function() { 
    var scrollPos = $(document).scrollTop(); 
    if(scrollPos > $('.bar').offset().top) { 
     $('.bar').addClass('fixed'); 
    } else { 
    $('.bar').removeClass('fixed'); 
} 
}).scroll();

https://jsfiddle.net/bg6cqcfp/1/

來源

2016-06-20 Rcls

固定位置相對於父母當給定位置屬性爲相對或絕對等 –

-1

哦，看來變換屬性是這裏有毛病。