CSS | Position: fixed top
CSS:固定的菜單請見索引[1]去查看所有提示.在這一頁:一個固定住的功能表您在這網頁右邊看到的功能表只是一個UL清單但當你滾動頁面時它仍保持固定。(您可能需要先將視窗縮小才能獲得捲軸。)使它固定在其位置的套裝程式含在樣式表的規則/程式之中。以下是直接從本網頁的來源程式中提取的編碼:
請見 索引[1] 去查看所有提示.
在這一頁:
一個固定住的功能表您在這網頁右邊看到的功能表只是一個UL清單 但當你滾動頁面時它仍保持固定。 (您可能需要先將視窗縮小才能獲得捲軸。) 使它固定在其位置的套裝程式含在樣式表的規則/程式之中。 以下是直接從本網頁的來源程式中提取的編碼:
<ul id=menu> <li><a href="#L384">Section 1</a> <li><a href="#details">Section 2</a> <li><a href="#FAQ">Section 3</a> </ul>在一個沒有CSS功能或CSS功能被關掉的流覽器中, 這只是一個含有連結的普通段落. 但有CSS,感謝以下的規則/程式, 它看起來將是被釘在流覽器視窗的右上角,"漂浮"在網頁之上:
#menu { position: fixed; right: 0; top: 50%; width: 8em; margin-top: -2.5em; }這裡有趣的規則或程式是: position: fixed, 使DIV在螢幕上固定。 top: 50% 和 right: 0 確認DIV在哪裡顯示, 在這種情況: 從視窗頂部向下50%,從右邊開始一個常量0px。 其他屬性,邊距,邊框, 顏色等,可根據個人喜好添加。
還有"left"和"bottom"屬性,將元素錨定在螢幕的左側或底部。
更多細節更確切地說: 一旦元素被固定為 position: fixed, 三個屬性"left","width"和 "right"會一起確定相對于視窗的水準位置和大小。 (CSS使用更通用的詞 viewport; 窗口是視口的示例。)
你最多需要三個屬性中的兩個,即左和寬度,右和寬度,或左和對。 只設置三個中的一個,或者根本不設置都是可行的。 在這種情況下,CSS將根據需要使用元素的自然 ("內在")大小和/或位置,以保留其預設值(auto)的任何屬性。...