「CSS」positionのabsoluteで親要素を基準として要素を配置するサンプル

2022年8月19日

構文
position : 値
値　absolute
親要素を基準として要素を配置します。
親要素にはposition:relative(static以外の値であれば可)を指定します。
absoluteを使って、親要素を基準として要素を配置します。
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。
直近の配置されている祖先があれば、それに対して相対配置されます。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  #tt {
  /*親要素*/
    position: relative;
    width: 150px;
    height: 30px;
    border: 2px solid #000;
    background-color: yellow;
  }
  #cft {
   /*子要素*/
    position: absolute;
    /*親要素から下*/
    top: 30px;
    /*親要素から右*/
    left: 20px;
    width: 150px;
    height: 30px;
    border: 2px solid #000;
    background-color: green;
  }
</style>
</head>
<body>
  <div>親要素を基準として要素を配置するテスト</div>
  <div id="tt">
    parent testAA
    <div id="cft">child testBB</div>
  </div>

</body>
</html>

説明
親要素に「position: relative」を指定します。
子要素に「position: absolute」を指定します。
親要素の辺が基準になります。

CSS

Posted by arkgame

関連投稿: