固定定位是最直觀而最容易理解的定位方式，先給大家介紹固定定位，來接觸一下CSS定位布局是怎樣一回事。
當元素的position屬性設置為fixed時，這個元素就被固定了，被固定的元素不會隨著滾動條的拖動而改變位置。在視野中，固定定位的元素的位置是不會改變的。
例如 學習網右下方的“回頂部”。
語法：
position:fixed; top:像素值; bottom;像素值; left:像素值; right:像素值;
說明：
“position:fixed;”是結合top、bottom、left和right這4個屬性一起使用的，其中“position:fixed;”使得元素成為固定定位元素，接著使用top、bottom、left和right這4個屬性來設置元素相對浏覽器的位置。
top、bottom、left和right這4個屬性不一定全部都用到。注意，這4個值的參考對象是浏覽器的4條邊。
在初學者階段，都是使用“像素”作為單位。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS固定定位</title>
<style type="text/css">
#first
{
width:120px;
height:600px;
border:1px solid gray;
line-height:600px;
background-color:#B7F1FF;
}
#second
{
position:fixed;/*設置元素為固定定位*/
top:30px;/*距離浏覽器頂部30px*/
left:160px;/*舉例浏覽器左部160px*/
width:60px;
height:60px;
border:1px solid silver;
background-color:#FA16C9;
}
</style>
</head>
<body>
<div id="first">無定位的div元素</div>
<div id="second">固定定位的div元素</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
我們嘗試拖動浏覽器的滾動條，固定定位的div元素不會有任何位置改變，但是無定位的div元素會改變。
這裡注意一下，我們在這裡只使用了top和left屬性來設置元素相對於浏覽器頂邊和左邊的距離就可以設置該元素的位置了，top、bottom、left和right這4個屬性不必全部用到，大家稍微想一下就懂了。
固定定位其實很簡單，就是使用“position:fixed”設置某一個元素為固定定位，接著使用top、bottom、left和right這4個屬性來設置一下元素相對浏覽器的位置就可以了。固定定位用途也很多，一般用於“回頂部”特效和固定欄目的設置。