使位置：固定元素尊重父母與位置：相對

Question

我剛剛發現，position: fixed元素不能很好地工作，如果你想讓它們在position: relative父母之內，它似乎總是指向窗口。我想知道是否有什麼我可以做的，因爲它尊重父窗格的界限，而不是窗口，也就是說div如何定位？我知道-webkit-sticky然而它的支持是不夠的項目要求。

Answer 1

你可以試試這個：

.container { 
 
    background: grey; 
 
    position: relative; 
 
    top: 60px; 
 
    overflow: visible; 
 
} 
 
.fixed { 
 
    width: 100%; 
 
    height: 55px; 
 
    background: blue; 
 
    position: absolute; 
 
    top: 10px; 
 
} 
 
.scrollable { 
 
    height: 200px; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="scrollable">HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element 
 
    inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration 
 
    text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative 
 
    element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element. HEre is some demonstration text that shows a "fixed" 
 
    element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some 
 
    demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element. Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!</div> 
 
    <div class="fixed"></div> 
 
</div>

基本上，將兩個孩子的父母，一個用於固定的元素，一個是你想要的內容裏面。給予固定的元素位置絕對，你很好去。

此外，如果你只是想要的元素要堅持內容的頂部或底部做到這一點：

.container { 
 
    background: grey; 
 
    position: relative; 
 
    top: 60px; 
 
    overflow: visible; 
 
} 
 
.fixed { 
 
    width: 100%; 
 
    height: 55px; 
 
    background: blue; 
 
} 
 
.scrollable { 
 
    height: 200px; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="scrollable">HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element 
 
    inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration 
 
    text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative 
 
    element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element. HEre is some demonstration text that shows a "fixed" 
 
    element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some 
 
    demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element. Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!</div> 
 
    <div class="fixed"></div> 
 
</div>

，如果去的頂部或底部什麼決定是在html中。將固定元素放置在內容之前，如果在放到底部之後放置它，它會放在最上面。