位置固定條不滾動

我有一部分工作。但由於某種原因，它不會停留在頂端。位置固定條不滾動

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>

時，它不是滾動。 enter image description here 當我滾動這與我猜想的top有關。

它在與中間部分的容器。

容器是：

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

來源

2014-02-24 TrippedStackers

唯一的選擇這裏是使用JavaScript來確定之前，使項目position: fixed;滾動位置。我建議ScrollToFixed，因爲它支持邊界和邊距。

更新：

您可以使用position: sticky;（與瀏覽器前綴）reference爲了做到這一點更具創造性的方式，特別是要解決它的iOS。

來源

2014-02-24 19:38:59 seangates

position:fixed是相對於瀏覽器窗口，而position:absolute;是相對於文檔，或接近的母與position:relative。通過使用position:fixed

你的情況

所以，在div將始終低於瀏覽器窗口（top:92px）的頂部92px。如果您想要向上滾動（與頁面頂部距離相同），請使用position:absolute。

小提琴

position:fixed - http://jsfiddle.net/yB45v/

position:absolute - http://jsfiddle.net/43SZW/

來源

2014-02-24 19:48:32 willanderson

你可以給一個position:fixed或position:absolute值在頁面上移動DIV的任何具體位置。

當使用`position：absolute'時，父div的位置應該是相對的。

所以得出的結論是，你可以通過這2種方法設置

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

來源

2014-02-24 19:51:43

位置固定條不滾動

回答

相關問題