本節では，絶対配置，とくに出力領域に対してボックスを固定する配置方法を解説する。
position: fixed; の場合の配置 position プロパティを fixed に指定された要素は，position: absolute; の場合と同様な配置のされ方をするが，配置の基準（収容ブロック）が，ブラウザの画面出力に対してはブラウザの表示領域になる。すなわち，この配置方法では，ボックスは表示領域のスクロールに対しても移動せず，表示領域に対して固定される。ページ出力の場合，要素はすべてのページの指定された位置に出力される。これらは，background-attachment プロパティを fixed に指定した背景画像に似ている。
この配置方法は，表示領域の上部にナビゲーションメニューをつねに表示させておいたりするのに有効である。フレームと同様の出力を行うこともできる。
指定方法を，具体例をあげて示しておこう。
#menu { position: fixed; width: 100%; height: 2em; top: 0; left: 0; right: 0; }
#main { position: fixed; width: 100%; top: 2em; left: 0; right: 0; bottom: 0; overflow: auto; /* overflow プロパティで要素の内容がボックスからあふれたときスクロールできるようにする */ }
これに対する HTML の本文を次のように構成する。
<BODY>
<DIV ID="menu">
......
</DIV>
<DIV ID="main">
......
</DIV>
</BODY>
menu の ID を持つ要素は，表示領域の上部に 2em の高さで固定して出力される。また，main の ID を持つ要素は，表示領域の上端から 2em より下部の領域で固定される。ここで，menu の ID を持つ要素にナビゲーションメニューを配し，main の ID を持つ要素に主となる内容を出力させることで，表示領域上部にメニューが表示されるようなレイアウトができる。
もうひとつ，“フレーム”を実現する例を見てみよう。
#header { position: fixed; width: 100%; height: 3em; top: 0; left: 0; right: 0; }
#menu { position: fixed; width: 20%; top: 3em; left: 0; bottom: 0; }
#main { position: fixed; width: 80%; top: 3em; left: 20%; right: 0; bottom: 0; overflow: auto; }
この場合の HTML 本文は次のように構成される。
<BODY>
<DIV ID="header">
......
</DIV>
<DIV ID="menu">
......
</DIV>
<DIV ID="main">
......
</DIV>
</BODY>
以上のようにすると，表示領域は T 字型に 3 分割される。まず，高さ 3em で分割し，上部が header になる。下部は左右に 20%，80% と分割され，それぞれ menu，main となる。
これを FRAMESET 要素などを用いて擬似的に HTML で書いてみると（疑似コードなので HTML としては無効である；イメージをつかむために示しておく），
<FRAMESET ROWS="3em,*">
<FRAME ID="header" NAME="header" SRC="..." NORESIZE>
<FRAMESET COLS="20%,80%">
<FRAME ID="menu" NAME="menu" SRC="..." NORESIZE>
<FRAME ID="main" NAME="main" SRC="..." NORESIZE>
</FRAMESET>
</FRAMESET>
となる。
ここでは，position: fixed; の例として 2 つほど示したが，そのほかにも応用方法はあるだろう。
position: fixed; による配置はサポートされない。
ここまで，要素の配置に関する CSS を見てきた。ここでは，これに関していくつか補足をしておこう。
要素の位置を指定すると，そのボックスが重なってしまうことがある。このときの重ね順は，一般に，文書中で後ろにあるものほど前面になる。重ね順は，プロパティで指定して変更することもできるが，これについては後述する。
重ね順に関して，実際にご覧になってもらおう。
.container { position: relative; height: 1.5em; }
#p1 { position: absolute; top: 0.5em; left: 0; background-color: #99F; }
#p2 { position: absolute; top: 0; left: 3em; background-color: #F99; }
<DIV CLASS="container">
<P ID="p1">The first paragraph.</P>
<P ID="p2">The second paragraph.</P>
</DIV>
The first paragraph.
The second paragraph.
赤い背景色のパラグラフ p2 のほうが後に書かれているため，重ね順が上になっている。
マージンを使って要素の位置を操作することがあるが，これと配置指定との違いを整理しておこう。
大きな違いは，一般に，マージンはボックス自身を動かさない（ボックス内のマージン領域の幅を指定する）が，配置のさいに使う top，right，bottom および left プロパティはボックスそれ自体を動かすということである。
ただし，マージンを使用した場合と配置指定を行った場合とで同様の出力が得られることもある。■