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

2020年9月6日

CSS テクノロジー プログラミング

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の要素が起点になってしまうようです。 <!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設定ですが、 こうした細かな事を知っておかないと、とんでもない不具合に繋がりかねませんからね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。