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

環境

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Google Chrome 103.0.5060.134
Windows 10 home 64bit
Google Chrome 103.0.5060.134 Windows 10 home 64bit
Google Chrome 103.0.5060.134
Windows 10 home 64bit

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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>

結果

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
div要素[cftB]がtopで元の位置(div要素cftA)から下に20pxずれます。
div要素[cftB]がleftで元の位置(div要素cftA)から右に30pxずれます。
div要素[cftB]がtopで元の位置(div要素cftA)から下に20pxずれます。 div要素[cftB]がleftで元の位置(div要素cftA)から右に30pxずれます。
div要素[cftB]がtopで元の位置(div要素cftA)から下に20pxずれます。
div要素[cftB]がleftで元の位置(div要素cftA)から右に30pxずれます。

 

CSS

Posted by arkgame