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>