問題 × 解決策

positonのabsoluteで、要素の座標位置を親要素基準にする、たった一つの記述

問題

positonのabsoluteで、要素の座標位置を親要素基準に設定したい。

解決策

親要素に「position: relative;」を設定する。

「position: absolute;」の座標設定の基準

positonのabsoluteをそのまま設定すると、絶対座標の影響で、ページ全体を基準としてしまいます。
そこで、座標の設定基準を親要素にする方法を解説します。

まず、HTMLの構築を行います。

divタグを構築します。
例として、このdivタグ(クラス「balloon-box」)を基準にし、中の「balloon」クラスを持った要素を「position: absolute;」で位置設定します。
便宜上、ここでは「balloon-box」「balloon」というクラスを設定しています。

<div class="balloon-box">
<p class="balloon">position: absolute;<br>top: -20px;<br>left: -20px;</p>
<p>これは普通のテキストです。これは普通のテキストです。これは普通のテキストです。これは普通のテキストです。これは普通のテキストです。これは普通のテキストです。 </p>
</div>

次にCSSの構築を行います。

クラス「balloon-box」に対し、「position: relative;」を設定します。
「position: relative;」は、絶対座標のabsoluteとは違い、相対座標で位置を設定できます。
ですが今回このrelativeを設定したのは、子要素の「positon: absolute;」の座標の設定基準をこの親要素にするためです。

そして子要素の中のクラス「balloon」に対して、「position: absolute;」を設定します。

.balloon-box{
	position: relative;
	padding: 10px;
	background-color: #FCECE8;
}
.balloon-box .balloon{
	position: absolute;
	top: -10px;
	left: -10px;
	display: inline-block;
	padding: 10px;
	color: #ffffff;
	background-color: #F15A24;
}

DEMOはこちら

position: absolute;
top: -20px;
left: -20px;

これは普通のテキストです。これは普通のテキストです。これは普通のテキストです。これは普通のテキストです。これは普通のテキストです。これは普通のテキストです。

ポイント!

「position: absolute;」の座標の設定基準は、親を含めた先祖要素のいずれかにpositionのstatic以外が設定されている場合、その要素が基準となります。
使いこなすと様々な表現が可能となるので、ぜひお試しください。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

five × 1 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧