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>

実際の動作サンプル

https://codepen.io/darucub/pen/ogxjvYy

現場からは以上です。それでは、またッ！！！