CSS の position を使ったレイアウトのサンプル

CSS の position プロパティを使ったレイアウトをお勉強中です。

この方法の利点は、HTML の出現順に左右されないレイアウトができる所です。例えば、HTML の末尾に書いた内容をページの一番上に配置することができます。

以下、簡単にまとめてみました。間違ってたらゴメンナサイ。

プロパティのキーワードについて

キーワード	意味	配置位置
absolute	絶対配置	直前（上位）ブロック要素の左上を基点に絶対配置
relative	相対配置	通常の出現位置（ソース上で書かれた所）を基点に相対配置
static	通常配置	通常の出現位置（ソース上で書かれた所）を基点に通常配置
fixed	固定配置	ブラウザの左上を基点に固定配置（スクロールの影響を受けない）

最後にソースの書き方によって、基点がどう変わるかのサンプルです。

サンプルコード ———————————————————————-

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>position プロパティ – 基点のテスト</title>
<style type="text/css">
<!--
body {
  margin: 0;
  padding: 0;
}
.Layer1 {
  position: relative;
  top: 0px;
  left: 0px;
  width: 600px;
  height: 400px;
  border: 1px solid red;
}
.Layer2 {
  position: absolute;
  top: 0px;
  left: 300px;
  width: 300px;
  height: 400px;
  border: 1px solid blue;
}
.Layer3 {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 300px;
  height: 200px;
  border: 1px solid orange;
}
-->
</style>
</head>
<body>
<!--  -->
<div class="Layer1">
<pre>
  .Layer1 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 400px;
    border: 1px solid red;
  }
</pre>
</div>
<div class="Layer2">
<pre>
  .Layer2 {
    position: absolute;
    top: 0px;
    left: 300px;
    width: 300px;
    height: 400px;
    border: 1px solid blue;
  }
</pre>
</div>
<div class="Layer3">
<pre>
  .Layer3 {
    position: absolute;
    top: 200px;
    left: 0px;
    width: 300px;
    height: 200px;
    border: 1px solid orange;
  }
</pre>
</div>
<!--  -->
<p>上の HTML ソースは以下の様になっています。</p>
<pre>
&lt;div id="Layer1"&gt;&lt;/div&gt;
&lt;div id="Layer2"&gt;&lt;/div&gt;
&lt;div id="Layer3"&gt;&lt;/div&gt;
</pre>
<p>Layer3 は Layer1 を基点として配置されます。</p>
<!--  -->
<div class="Layer1">
<pre>
  .Layer1 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 400px;
    border: 1px solid red;
  }
</pre>
<div class="Layer2">
<pre>
  .Layer2 {
    position: absolute;
    top: 0px;
    left: 300px;
    width: 300px;
    height: 400px;
    border: 1px solid blue;
  }
</pre>
<div class="Layer3">
<pre>
  .Layer3 {
    position: absolute;
    top: 200px;
    left: 0px;
    width: 300px;
    height: 200px;
    border: 1px solid orange;
  }
</pre>
</div>
</div>
</div>
<!--  -->
<p>上の HTML ソースは以下の様になっています。</p>
<pre>
&lt;div id="Layer1"&gt;
  &lt;div id="Layer2"&gt;
    &lt;div id="Layer3"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Layer3 は Layer2 を基点として配置されます。</p>
<!--  -->
</body>

実際の動作サンプル ———————————————————————-

– サンプル