位置固定栏确实滚动

Question

我有一部分工作。但出于某种原因，它不会保持在顶部。

CSS Navbox：

#navbox {
        float: left;                
        width: 150px;
        border: 1px solid blue;
        border: thin solid #CCC;
        background-color: #FFF;
        border-radius: 4px;
        padding: 5px; 
        position: fixed;
        top: 92px;  
        z-index: 1000;
    }

HTML代码：

<div id="navbox">
    <div class="navigation">
      <a href="#aeast">AFC East</a> <br />
      <a href="#anorth">AFC North</a> <br />
      <a href="#asouth">AFC South</a> <br />
      <a href="#awest">AFC West</a> <br />
    </div>
</div>

当它不滚动时。 当我滚动 它与top猜测有关。

它位于中间部分的容器中。

容器是：

#container {
    width: 870px;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;                                         
}

Answer 1

此处唯一的选择是在制作项position: fixed;之前使用JavaScript确定滚动位置。我建议使用ScrollToFixed，因为它支持边界和边距。

<强>更新

您可以使用position: sticky;（以及浏览器前缀）[reference]，以更有创意的方式执行此操作，尤其是针对iOS进行修复。

Answer 2

position:fixed相对于浏览器窗口，而position:absolute;相对于文档，或最近的父项position:relative

因此，在您使用position:fixed的情况下，div总是比浏览器窗口顶部低92px （top:92px）。如果您希望它向上滚动（与页面顶部距离相同），请使用position:absolute。

---

<强>小提琴

1. position:fixed - http://jsfiddle.net/yB45v/
2. position:absolute - http://jsfiddle.net/43SZW/

Answer 3

您可以提供position:fixed或position:absolute值来将div移动到页面上的任何特定位置。

使用`position：absolute＆＃39;父div位置应该是相对的。

所以结论是你可以通过这两种方法设置它

.element{ position:fixed; top:2%; right:2%; }
.element{ position:absolute; top:50px; right:50px; } /*parent div should be in relative position.