div中的固定和相對元素

Question

我正在嘗試在網站的div（而不是整個頁面）中放置固定元素。

我希望將導航（固定銷，凝視器，錐子等）固定在書寫部分內，以便即使用戶滾動導航也仍然在那里。 但是目前，它在整個頁面上都是固定的。

如您在測試頁上所見，導航已按照我希望的方式固定。

我嘗試弄亂了#small-box-links position:fixed position:relative / position:fixed ，但這無濟於事。

 .home_writing { display: block; position: relative; background: rgba(50, 50, 50, 0); height: 1000px; text-align: left; } #small-box-container { border: 1px solid black; background: rgba(10, 200, 10, 0); width: 980px; height: 800px; overflow: auto; } #small-box-links { position: relative; margin-left: 700px; height: 25px; margin-top: 10px; } 

 <div id="small-box-container"> <div id="small-box-links"> <a href="#small-box1" class="top_link_style">deadspin |</a> <a href="#small-box2" class="top_link_style">gawker |</a> <a href="#small-box3" class="top_link_style">the awl |</a> <a href="#small-box4" class="top_link_style">other</a> </div> <div style='overflow:hidden; width:980px;'> <div style='overflow:scroll; width:988px'> <div id="small-box1" class="small-box"> <h2>deadspin</h2> <h3>How Pat Summitt Ruined The Best Thing About Women's Basketball</h3> <!-- etc. for other boxes --> 

我發現了這個相關問題，但是當我嘗試top / left等時，該元素仍然固定在頁面上，而不是寫div。 （我嘗試將父元素.home_writing相對，但這無法解決我的問題。）

（另一方面，我無法弄清楚為什么段落中的Playfair看起來不像側邊欄導航。它的樣式相同）。

Answer 1

position:fixed始終使用視口作為參考框架，因此您不能在此處使用它。

但是解決方案非常簡單-使用position:absolute代替將導航定位在具有position:relative （和固定高度）的容器元素內，然后將內容作為同級容器內的同級容器，並固定高度和該元素的上overflow:auto ：

<div style="position:relative; height:800px;">
  <div style="position:absolute; top:0; …"> [link link link] </div>
  <div style="height:800px; overflow:auto;">
    Lorem ipsum, dolor sit …
  </div>
</div>