CSS解説 position: absoluteプロパティ
cssの「position: absolute」・・・
本日はこれを勉強する！
CSSの要素の配置方法の一つですね。これを覚えると、作れるCSSの自由度がぐんと上がりそうですね。
「absolute」は、直訳すると「完全な」、「絶対な」を意味します。
これが意味するのと同じように、CSSの「position:absolute;」もある起点からの「絶対配置」を意味します。
ある起点ってどこ？
起点は「基準ボックス」の上下左右です。以下のコードのように、上下左右からどれくらいの位置といった形で指定します。
【サンプルコード】
.sample_absolute {
background-color: #ccc; /* 背景色を灰色に指定 */
padding: 10px; /* 余白を10pxに指定 */
position: absolute; /* 要素の配置方法をabusoluteに指定 */
left: 10px; /* 左からの10pxに配置位置を指定 */
top: 10px; /* 上からの10pxに配置位置を指定 */
}
「基準ボックス」はデフォルトでは、ブラウザのウインドウ枠ですが、多くは親要素に設定する使い方もします。
また、親要素を基準ボックスに設定するには、親要素のpostionを「relative」か「absolute」にする必要がありますね。
それでは、試しに親要素に対して、「position: absolute」を設定した子要素の配置をしてみましょう。
【CSS部分】
<style type="text/css">
/* 親要素 */
.sample_parent {
width: 350px;
background-color: #7ebeab; /* 背景色を青竹色に指定 */
padding: 10px; /* 余白を10pxに指定 */
position: relative; /* 要素の配置方法をrelativeに指定 */
}
/* 子要素(position: absolute) */
.sample_absolute {
background-color: #ccc; /* 背景色を灰色に指定 */
padding: 10px; /* 余白を10pxに指定 */
position: absolute; /* 要素の配置方法をabusoluteに指定 */
left: 50px; /* 左からの50pxに配置位置を指定 */
top: 10px; /* 上からの10pxに配置位置を指定 */
}
</style>
【HTML部分】
<!--sample_absoluteの親要素にsample_parentを指定--> <div class="sample_parent">
<p class="sample_absolute">absoluteのテスト</p>
</div>
【実行結果】
単純にウインドウ枠か親要素からの位置を数値で指定しているだけなんだね。 理解できてきた！
お名前
