設置位置：固定元素尊重父項，位置：相對

Question

我只是發現了這個position: fixed如果您希望position: fixed元素位於position: relative內，則position: fixed元素將無法很好地工作position: relative父級，似乎它們始終引用窗口。 我想知道是否有什么我可以做的，以尊重父div而不是窗口的邊界，即絕對定位的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。 將固定元素放在內容之前，如果放在底部，則將其放在頂部。