問題
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以外が設定されている場合、その要素が基準となります。
使いこなすと様々な表現が可能となるので、ぜひお試しください。
コメント