CSS: Position: fixed

很常會看到有些網頁的NavBar會跟著畫面滾動並停留在最上方，並不會因為畫面向下拉而消失，又或者是有些在最左下角的回頂端(如圖)

想要實現這種功能就必須使用到 position: fixed

語法

1
2
3

.box{
	position:fixed;
}

在上面的codepen中可以看到我在navbar中下了position:fixed;，所以當你滾動畫面時粉紅色navbar會一直固定在畫面上。

但要注意，只寫position:fixed並不能將navbar固定在畫面最上方，你可以自己試試看，會發現他和上面有一些距離，所以這時候就要使用top。

透過top、bottom、left和right可以設定fixed元素的位置，以上面的codepen例子來說，top: 0;指的就是距離畫面頂端為0，所以會固定在畫面最上方，同理將其他值設成0就會與左邊右邊或底部沒有距離。

當然也可以設置成別的數值，px就是距離那個屬性的位置有幾個px，設定成%的話，假設是top:50%; 就會固定在由頂端往下50%的地方。

fixed可以製作navbar等會固定在畫面上的元素，與fixed相似的還有sticky和relative，關於他們可以參考我的其他篇文章。