「CSS」positionのrelativeで元の位置を基準として要素を配置する

2022年8月1日

環境

Google Chrome　103.0.5060.134
Windows 10 home 64bit

構文
position : relative
元の位置を基準として要素をずらして配置します。
要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。
オフセットは他の要素の配置には影響を与えません。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cftA {
    width: 150px;
    height: 30px;
    border: 2px solid #000;
    background-color: #00FFFF;
  }
  .cftB {
    position: relative;
    /*topで元の位置から下に20pxずれます*/
    top: 20px;
   /* leftで元の位置から右に30pxずれます*/
    left: 30px;
    width: 150px;
    height: 30px;
    border: 2px solid #000;
    background-color:#F0FFF0;
  }
</style>
</head>
<body>
<div class="cftA">元の位置1</div>

<div class="cftB">元の位置をずらす</div>
</body>
</html>

結果

div要素[cftB]がtopで元の位置(div要素cftA)から下に20pxずれます。
div要素[cftB]がleftで元の位置(div要素cftA)から右に30pxずれます。

CSS

Posted by arkgame

Related posts: