position:absolute を使用して、かつ文章の高さを可変にしたときに要素同士が重なったときの対処法
positionをabsoluteで指定したときに親要素の高さがなくなってしまう時がある。
このようなときはpaddingなどで親要素の高さを調節すれば解決する。
しかし、親要素の中にブラウザ幅によって可変する文章の子要素があったときは、同一の親要素の中で子要素同士が干渉するときがある。
親要素{
position:relative;}
子要素１{
position:absolute;
top:10px;
left:10px;
padding:10px;
width:10px;
}
子要素2{
position:absolute;
top:20px;
left:10px;
}
このように子要素１と子要素２を両方ともabsoluteで指定してしまうと、要素の高さが自動で変更されたときに要素２にかぶってしまう。
これに対する対処法として、
親要素{
position:relative;}
子要素１{
position:absolute;
top:10px;
left:10px;
padding:10px;
width:10px;
}
子要素2{
padding-top:20px;
}
上記のコードのようにどちらかのposition:absoluteを消してpaddingなどで高さを変える方法がある。
absoluteを使用するとどうしてもrelativeに対する位置になってしまうので要素同士がかぶるという不具合が発生する。
ーこれからの注意点ー
positionプロパティを使用するときには常にどの要素に対する絶対値なのかを意識して作っていきたい。