【CSS】positionで位置を指定する

【CSS】positionで位置を指定する

CSSで画面レイアウトを作成する際、画像を指定した位置に表示させたいということがあるかと思います。

その場合にpositionプロパティのabsoluteやrelativeを利用するのですが、単体だとうまくいかないパターンというのがありますね。

例えば、文字が表示されている部分に画像を表示させる場合などです。

(印鑑を押すイメージです。)

うまく表示させる方法があったのですが、忘れても良いようにメモです。

<style>
#DIV1 {
  position: relative;
  width: 200px;
  height: 200px;
  border: solid 2px red;
}
#DIV2 {
  position: absolute;
  left: 100px;
  top:70px;
  width: 50px;
  height: 50px;
  border: solid 2px green;
}
</style>
<div id="DIV1" >
  <span>DEV1</span>
  <div id="DIV2" >
    <span>DEV2</span>
  </div>
</div>

一応解説です。

positionのabsoluteは親要素からの絶対位置を指定するものですが、親要素のpositionがstaticの場合はbodyからの絶対値となります。

positionのデフォルト値はstaticですから、親要素にpositionを指定しない場合はbodyからの絶対値となってしまうわけですね。

positionのrelativeは親要素からの相対位置を指定するものです。

そのため、positionにrelativeを指定してもtopとleftを指定しなければpositionにstaticを指定したものと同じ位置になります。

上の例ではDEV1のpositionにrelativeを指定し、DEV2のpositionにabsoluteを指定することにより、DEV1を基準としてDEV2の位置を指定しています。

これであれば、DEV1の位置が移動したとしてもDEV2が連動して移動するようになるはずです。

もっと簡単な方法があるかもしれませんけどね。