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

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

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

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

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

https://gist.github.com/darucub/915606ae5793bda523bd980f45defadf

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

サンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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=&quot;Layer1&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;Layer2&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;Layer3&quot;&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=&quot;Layer1&quot;&gt;
  &lt;div id=&quot;Layer2&quot;&gt;
    &lt;div id=&quot;Layer3&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Layer3 は Layer2 を基点として配置されます。</p>
<!--  -->
</body>
</html>