cssを得意としてコーディングしている時に、まだまだ自分の知らないことがあると気がついた、ユゲタです。
position機能について、便利に座標で配置できるので、webページ内でのドラッグ操作や、フローティング要素などの扱いに便利に仕様できますが、absoluteをネストで使うと座標がずれるという事に、ある時コーディングをしていて気が付きました。
今後のcssライフの為に、徹底的にposition:absoluteについての調査をしておきました。
本日のIT謎掛け
「position:absolute」と、かけまして・・・
「お見合いの場で趣味を聞く時」と、ときます。
そのココロは・・・
いちが、とても重要です。
（位置と、一致）
positon:absoluteについて
この記事を見ている人は、ある程度の認識があると想定しているんですが、css初心者の人や、position:absoluteがわからない人の為に簡単にこの機能の説明をしておきます。
cssにおけるposition設定は、要素の位置に関する設定ができる機能です。
具体的な機能は、以下の４つあります。
1. static
デフォルト値で、通常のタグのように、HTMLで書かれたとおりの位置に順番に並ぶ表示方法です。
2. absolute
ページ内で、自由に座標で要素を配置することができるようになります。
top,left,bottom,rightの値を登録することで、画面の好きな位置に配置できます。
3.relative
通常absoluteを使う場合は、はページの左上を(0,0)としてセットされますが、relativeをセットした要素の左上位置を(0,0)として、陰萎条件の依存関係を断ち切る場合などに仕様できます。
4.fixed
閲覧しているブラウザの画面の座標に配置でき、ページのスクロールなどには依存しない特性があります。
absoluteのネスト問題
absoluteは、relative設定の要素を(0,0)とする事は、理解していましたが、それ以外はページの左上が起点になると信じていましたが、
absoluteの中にさらにabsoluteがセットされた要素があると、その子要素は、親absoluteの要素が起点になってしまうようです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin:10px;
padding:0;
border:1px solid green;
}
.base{
position:relative;
border:1px solid black;
}
.test1{
position:absolute;
width:100px;
height:100px;
top:100px;
left:100px;
border:1px solid red;
}
.test2{
position:absolute;
width:80px;
height:80px;
top:100px;
left:100px;
border:1px solid blue;
}
</style>
</head>
<body>
<div class="base">
<div class="test1">
<div class="test2">
あいうえお
</div>
</div>
<div class="test2">
かきくけこ
</div>
</div>
</body>
</html>
サンプルとして、上記のようなコードを書いていました。
レンダリングすると、上記のようになります。
注目すべきポイントは、「あいうえお」の書かれた要素と「かきくけこ」の書かれた要素は、同じクラスで表示してますが、上位にabsoluteがある場合に座標がずれていることが見て分かります。
relativeをセットしていないにも関わらず、起点が変わってしまうという事をしりませんでした。
ちなみに、他のブラウザで見てみたところ、どれも同じ結果になったので、ブラウザのバグということではなさそうです。
これまで、あまりネストで使うことがなかったabsolute設定ですが、
こうした細かな事を知っておかないと、とんでもない不具合に繋がりかねませんからね。
