0

我正在尝试在我的网站的 div （而不是整个页面）内放置一个固定元素。

我希望将导航（deadspin、gawer、awl、other）固定在写作部分，这样即使用户滚动，导航仍然存在。但目前它已针对整个页面进行了修复。

正如您在我的测试页面上看到的，导航是按照我想要的方式固定的。

我试着弄乱position:relative/但这没有帮助position:fixed。#small-box-links

.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 -->

我发现了这个相关的问题，但是当我尝试上/左等时，元素仍然固定在页面上，而不是写 div。（我尝试将父元素 ,.home_writing设为相对，但这并不能解决我的问题。）

（另一方面，我不明白为什么段落中的 Playfair 看起来不像侧边栏导航。它的样式相同）。

4

1 回答 1

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>
于 2013-04-10T15:08:28.650 回答