固定位置
當元素的位置固定後，便會依瀏覽器視窗計算其在網頁中的相對位置，而不是依父元素或子元素。固定位置元素會在瀏覽器視窗的指定範圍內流動，而不是在網頁本文內的位置流動 (如同絕對位置)。
設定固定位置
下列範例含有代表固定屬性的典型版面配置：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html><head><title>Fixed Positioning Example</title><style type="text/css">
body{height=640px; width=480px;}
#logoBar {position: fixed; width: 99.15%; height: 15%; top:0; right: 0; bottom: auto; left: 0; border :solid;}
#leftSide {position: fixed; width: 10em; height: auto; top:15%; right: auto; bottom: 50px; left: 0; border :solid;}
#main {position: fixed; width: auto; height: auto; top:15%; right: 0; bottom: 50px; left: 10em; border :solid;}
#footer {position: fixed; width: 99.15%; height: 50px; top: auto; right:0; bottom: 0; left: 0; border :solid;}
</style></head>
<body>
<div id="logoBar">...logobar...</div>
<div id="leftSide">...leftside...</div>
<div id="main">...main...</div>
<div id="footer">...footer...</div>
</body></html>
在此範例中，固定容器位於網頁內容的流向外。即使重新調整瀏覽器視窗的大小，它們仍會維持與瀏覽器視窗相對的位置。一經定義後它們便不會離開指派的位置，這也表示它們可能會阻擋或遮掩位於其下方元素的檢視。因此，在您的網頁設計中，請務必審慎放置固定位置元素並執行瀏覽器測試。