[CSS] position:absoluteはネストにすると座標がおかしくなる調査

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

cssを得意としてコーディングしている時に、まだまだ自分の知らないことがあると気がついた、下駄です。
 

position機能について、便利に座標で配置できるので、webページ内でのドラッグ操作や、フローティング要素などの扱いに便利に仕様できますが、
 

absoluteをネストで使うと座標がずれるという事に、ある時コーディングをしていて気が付きました。
 

今後のcssライフの為に、徹底的にposition:absoluteについての調査をしておきました。

本日のIT謎掛け

「position:absolute」と、かけまして、
 

「お見合いの場で趣味を聞く時」と、ときます。
 

そのココロは・・・
 

いちが、とても重要です。
(位置と、一致)

positon:absoluteについて

この記事を見ている人は、ある程度の認識があると想定しているんですが、css初心者の人や、position:absoluteがわからない人の為に簡単にこの機能の説明をしておきます。
 

cssにおけるposition設定は、要素の位置に関する設定ができる機能です。
 

具体的な機能は、以下の4つあります。
 

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の要素が起点になってしまうようです。
 

 

サンプルとして、上記のようなコードを書いていました。
 


 

レンダリングすると、上記のようになります。
 

注目すべきポイントは、「あいうえお」の書かれた要素と「かきくけこ」の書かれた要素は、同じクラスで表示してますが、上位にabsoluteがある場合に座標がずれていることが見て分かります。
 

relativeをセットしていないにも関わらず、起点が変わってしまうという事をしりませんでした。
 

ちなみに、他のブラウザで見てみたところ、どれも同じ結果になったので、ブラウザのバグということではなさそうです。
 

これまで、あまりネストで使うことがなかったabsolute設定ですが、
 

こうした細かな事を知っておかないと、とんでもない不具合に繋がりかねませんからね。

Leave a Reply

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