父元素的固定元素疊加滾動條

Question

我有固定元素和滾動條的問題。有沒有辦法將父元素的滾動條後面的固定元素移動？這裏是fiddle。

body { 
 
    margin: 0; 
 
} 
 

 
.scrollable-container { 
 
    height: 100vh; 
 
    overflow-y: scroll; 
 
} 
 

 
.very-long-content { 
 
    height: 5000px; 
 
} 
 

 
.fixed-element { 
 
    background-image: url(http://space-kids.org/wp-content/uploads/2016/02/jupiter.png); 
 
    background-size: 100% 100%; 
 
    height: 300px; 
 
    position: fixed; 
 
    right: -100px; 
 
    top: calc(50% - 150px); 
 
    width: 300px; 
 
}

<section class="scrollable-container"> 
 
    <section class="very-long-content"> 
 
     <div class="fixed-element"></div> 
 
    </section> 
 
</section>

Answer 1

您可以添加一個負z-index到.fixed-element（或者，在一般情況下，要確保它比一個.scrollable-container，默認爲0小）。請注意，這會使.scrollable-container的內容也顯示在前面（包括.very-long-content的內容）。

我會推薦你​​，如果可能，不要嵌套固定元素，因爲they are always positioned relative to the screen's viewport。

Answer 2

圖片，顯示

這是你的固定元素應該是怎麼樣的

.fixed-element { 
    background-image: url(http://space-kids.org/wp-content/uploads/2016/02/jupiter.png); 
    background-size: 100% 100%; 
    height: 300px; 
    position: fixed; 
    right: -100px; 
    top: calc(50% - 150px); 
    width: 300px; 
    z-index: -1000; 
}