CSS | 「position」プロパティで位置がズレる原因と解決策

2023-06-09CSS トラブルシューティング,CSS ポジション,CSS

CSSの「position」プロパティで「top」や「bottom」、あるいは「left」や「right」を指定した時に位置がズレる原因と解決策を紹介しています。

positionプロパティで位置がズレる原因

positionプロパティで位置がズレるのは、絶対値で配置している要素に指定されている「margin」や「padding」の影響を受けているのが主な原因になります。

例えば、デフォルトで上下に「margin」が指定されているpタグやhタグを「top: 0」で配置すると、そのままでは要素の上に余白ができてしまいます。

以下に、その例を示します。

<div class="sample-container">
	<p>Hallo World</p>
</div>

.sample-container {
	width: 200px;
	height: 200px;
	position: relative;
	margin: 10px;
	background: darkblue;
}
.sample-container p {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	color: white;
}

positionプロパティで位置がズレる場合の解決策

positionプロパティで位置がズレる場合、例えばpタグを「margin」や「padding」が付いていないspanタグに差し替えるか、「margin」や「padding」に「0」を追加で指定します。

<div class="position-container-2">
	<p>Hallo World</p>
</div>

.sample-container-2 {
	width: 200px;
	height: 200px;
	position: relative;
	margin: 10px;
	background: darkblue;
}
.sample-container-2 p {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	margin: 0;
	padding:0;
}

「margin」や「padding」に「0」を追加する事で絶対値の指定通りに位置に配置された事が確認できます。