「CSS」positionのrelativeで元の位置を基準として要素を配置する
環境
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ずれます。