あなたはエリアや要素の配置方法を決定することができます。それにはpositionプロパティが使用されます。このプロパティは、要素を最終的にどのように配置するかを示します。合計して、4つの異なる配置オプションが用意されています。
• static – 特別な配置は行われず、通常のテキストフローが維持されます。
• relative – 要素に対する相対的な配置が行われ、通常の位置や要素の初期位置に基づいています。
• absolute – top、bottom、left、rightのプロパティを使用して要素を絶対配置します。絶対配置された要素は通常のテキストフローの外にあります。絶対配置の位置は親要素の端から相対的に計算されます（但し、親要素のposition: staticプロパティを持っていない場合に限る）。
• fixed – 要素は絶対配置されます。スクロールすると要素がその位置に固定されます。
最初の2つのオプションは可変配置を可能にします。ここでは、要素はお互いに対して配置されます。次の2つの例は、この配置方法の例を示しています：
• Element 2はElement 1に対して30ピクセルオフセットされます。
• Element 2はElement 1の後ろに配置されます。
fixedとstaticでは異なります。これらを通じて、要素を具体的な場所に配置することができます。配置指定は親要素またはブラウザウィンドウに基づいています。例：
• Element 1はブラウザウィンドウの右端から30ピクセル、上端から20ピクセルに配置されます。
後に、異なる配置のオプションがもう一度詳しく紹介されます。ただし、まずは一つ注意点: 要素の配置に関連して、フロートと呼ばれるものが重要な役割を果たします。この重要なCSS原則については、次のチュートリアルで詳しく説明します。基本的には、フロートはウェブページの要素が文書内でどのように流れるかに関するものです。要素はできるだけその方向に押し込まれます。配置方法によって、要素のフローを明確に定義することができます。
相対配置
position: relativeを使用して相対配置を行うと、2つのことが起こります：
• ボックスが通常のフローから移動します。
• 要素の元の位置が予約されます。
元の位置が予約されることで、他の要素は元の位置にまだ要素が存在しているかのように振る舞います。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>3つのボックスが定義されました。
ボックス2と3には配置指示がありません。したがって、通常のドキュメントフローに従います。一方、ボックス1は相対配置されています。これにより、ボックス2と3はボックス1に影響を受けず、ボックス1の場所はこれらのボックスによって占有されません。配置はtop, right, left、およびbottomを使用して行われます。相対位置指定では、ドキュメントフロー（flow）内の元の位置を基準にします。
• top: 25px – ボックスを下に25ピクセル移動します。ボックスの通常の位置には上から25ピクセル挿入されます。
• right: 25px – ボックスを左に25ピクセル移動します。ボックスの通常の位置には右から25ピクセル挿入されます。
ピクセル指定は元の位置に対して相対的であることに注意してください。指定は値を挿入する場所を決定し、つまり上と右です。この側面が重要です。指定はボックスをどこに移動させるかを定めるのではありません。
絶対配置
次は絶対配置です。この配置方法では、要素は完全にフローから外れます。ページの他の要素は、その要素が全く存在しないかのように振る舞います。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>こちらも3つのボックスが定義されました。ボックス1は絶対配置されています。
相対配置とは異なり、ボックス1のために場所は予約されません。ボックス2と3は上にスライドします。
配置指定top, right, bottom、またはleftは、今ではボックスのフロー内の元の位置を基準にしません。むしろ、指定はrelative, absoluteまたはfixedで配置された次の周囲の要素に基づきます。周囲の要素がない場合、要素はドキュメントツリーの最上位要素、すなわちhtmlに対して配置されます。
fixedでの配置
position: fixedを使用すると、要素を固定できます。以下に例を示します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Splitter-Effekt Teil 1</div>
<p>Nur für kurze Zeit ist das neueste Tutorial oder Video-Training in der Online-Ansicht oder der Inhalt aus der Download-Kategorie punktefrei. Erfahre hier mehr ...</p>
</body>
</html>固定されたボックスはスクロールせず、割り当てられた位置に常に留まります。
固定ボックスの親要素は常にブラウザウィンドウです。
古いブラウザとの関連で特に要注意です。例えば、IE6は本来行うべきことを行わないことがあります。このブラウザ用にWebサイトを最適化したい場合、次の2つの選択肢があります:
• 固定されたボックスを使わない。
• IE用のハックを使用する。
ハックを使用する場合は、http://thestyleworks.de/tut-art/iewinfixed.shtmlで示されているように、このブラウザ用の固定ボックスを作成する方法を説明する小さなJavaScriptをお勧めします。
