いつも忘れて思い出すのに時間がかかるCSSテクニック集

HOME > 油断したらすぐに忘れてしまう、positionプロパティの巻

油断したらすぐに忘れてしまう、positionプロパティの巻

こんがらがってしまう、positionプロパティの「relative」「absolute」。
「static」は特に配置方法を指定しない初期設定、「fixed」は位置固定ということで、これは大丈夫。

↓relativeを指定した場合

観覧車

relative

このように、relativeを指定したものは、直前の要素に対してtopとleftの位置が設定されます。
通常、親要素の<div>には、reletiveを指定しておきます。
また、上記のように親要素の<div>から画像がはみ出ていますが、
回避するには<div>に高さを指定してあげる必要があります。

HTML

<div class="example09">
<p><img src="img/example09_img01.png" alt="観覧車" width="200" height="150" /></p>
<p class="relative"><img src="img/example09_img02.png" alt="relative" width="200" height="150" /></p>
</div>

CSS

.example09 {
  background-color: #DAE7E9;
  position: relative;
}
.example09 .relative {
  position: relative;
  top: 50px;
  left: 50px;
}

↓absoluteを指定した場合

観覧車

absolute

このように、absoluteを指定したものは直前の要素は無視して、
親要素の<div>に対して、topとleftの位置が設定されます。
通常、親要素の<div>には、reletiveを指定しておきます。
また、上記のように親要素の<div>から画像がはみ出ていますが、
回避するには<div>に高さを指定してあげる必要があります。

HTML

<div class="example09">
<p><img src="img/example09_img01.png" alt="観覧車" width="200" height="150" /></p>
<p class="absolute"><img src="img/example09_img03.png" alt="absolute" width="200" height="150" /></p>
</div>

CSS

.example09 {
  background-color: #DAE7E9;
  position: relative;
}
.example09 .absolute {
  position: absolute;
  left: 50px;
  top: 50px;
}

これらを使って、こんなレイアウトを組むことができます。

図書館美女

HTML

<div class="example09-box">
<p><img src="img/example09_img04.png" alt="図書館美女" width="150" height="150" /></p>
<p class="icon"><img src="img/example09_icon.png" /></p>
</div>

CSS

.example09-box {
  width: 150px;
  padding: 5px;
  position: relative;
  background-color: #DFDFDF;
}
.example09-box .icon {
  position: absolute;
  top: -10px;
  left: 120px;
}

↑ページトップへ

HOMEへ