positionかfloatどっちを使えばいいのか positionとz-indexについて図解で分かりやすく説明

positionってfloatと違って上下左右に数値(値)を設定するとその通りなって思い通りにコンテンツを配置できる。

めちゃくちゃ便利じゃないか。

 

しかし個人的にはpositionを深く理解していない場合はやすやすと使われることはお勧めしません。

 

positionは思ったよりも複雑であり、また後で一部のエリアのCSSを変更した時にpositionの位置をしっかりと指定したのにブロックから飛び出してしまったなどサイトが崩れることもあります。

こうなってしまうと、その崩れた状態にもよりますが修正するのに時間がかかってしまうこともあるでしょう。

 

そうならないためにpositionについてもっと深く知って、使い方をマスターしてみましょう。

positionの働き方について知っているのと知らないとで使うべきところとそうでないところの判断が明確にできるようになります。

 

またfloatと何が違うのかなど概念の比較についてもまとめています。




positionは要素の重なり順を変えれる

基本的にボックスの重なり順はhtml(マークアップ)に書いた順に従います。

先に書いた要素が最下になり、後からできたボックスがどんどん上へ積み重なっていきます。

 

しかしpositionのstatic以外の指定で配置された要素は重なりの順序を入れ変える事ができます。

デフォルトでの配置
層を入れ替える

z-indexで層のabsoluteした子供たちの入れ替えには注意すべきことがあります。

 

そのことについて順を追って解説していきます。

 

層を入れ替えれるz-indexについて

z-indexというセレクタによって重なの順序を変えるのは自由自在ではありません

 

いくつかのルールに従って階層を変えることができます。

そのルールについて説明していきます。

 

floatとpositionの違い

positionの階層を変えるルールを把握するためにfloatとの働き方の違いについて説明します。

 

position配置で起こっている現象はfloatとよく似ています。

それは要素が浮いてる状態であること。

 

floatとpositionの違い

 

floatにはhtmlに従った要素の順序により重なり順が定められているが、層という概念がありません。

つまり自身を層として認識していないため他のfloatした要素との配列レベルは同じであり重ねたり潜り込ませたりすることはできない。(2D:x,y軸のみ)

 

positionは親の基点から子たちを配列させているので初期状態ではhtmlで記述した順序に従った重なりであるが、基準からどれだけの階層地に移動することも概念として備わっているため、層の順列を操ることができます。(3D:x,y,z軸)

 

positionはZの領域も指定できるためpositionは3次元でありfloatは2次元という考え方です

 

要素を同列のレベルで扱いたい場合はfloat。

層を作り親要素と中の子要素たちとの重なりを操りたい場合はpositionと使い分けましょう。

 

z-indexを扱うルール

1. z-indexはposition指定されている要素にのみ有効化される。

 

2. z-indexの指定を可能にするにはpisitionをstatic(初期状態)以外にする。

またpositionをstatic以外にすると、z-indexを指定しなくても親要素をベースとしたz軸(3D)の概念がある。

『※ルートスタックコンテキスト(初期状態)』される。

z-index指定がある『スタックレベル』と新たに『スタックコンテキスト:子要素の集まり』が生 成される。

 

3. opacity(透明度が1以下のとき)・transform(変形の値がnone以外のとき)を指定した要素も中の子要素で順序を認識する『スタックコンテキストが生成される』

 

4. z-indexを指定しないときはz-index: auto;となり、要素の重なり順はhtmlに従われます。(ルートスタックコンテキスト)

 

5. z-index指定したベースとなっている要素に従いその中の子要素のスタックコンテキストはhtmlの記述のルールから逃れられる

position: fixed; を指定した要素が最も手前に表示されるのはこれが理由です。

 

z-indexを使いこなすには

z-indexの指定でpositionを指定した要素にZ軸の世界(3D)を操ることができます。

 

もともとpositionはz-index指定をしなくても層(3D)の概念が備わっています。

z-indexを記述する意味性とは階層配置の格付けがされるということです。

つまりそうの順列を変えることができるということです。

 

更に理解を深めるために必要なワード:『スタックレベル』『スタックコンテキスト』

 

z-indexで階層を操るためのレベルの付け方

スタックレベルについて

スタックレベル

スタックレベルとは要素の順序を決める値である=プロパティをz-index で指定する。

“auto”指定も”0″指定も見た目上は同じでどちらもレベル(格)は0であるが中で何が起こっているのでしょう。

z-index: auto;はz-indexを指定していない状態、つまり初期状態という意味である。

 

この時点では層(要素)のレベルの格付けは生成されずhtmlの記述通りの順序に従っています。

 

z-index: 0;はベースとなる要素の中の子要素の層を格付けを可能にし、上下関係を生成できる状態である。

値の数値が高いものほどレベルが高く手前に表示され、マイナス数値に行くとレベルが低くなるので奥に表示される。数値を指定することでhtmlで記述した順よりも層の移動が自由に行える。(ただしあるルールに従って)

 

そしてスタックレベル(z-index指定)によりベースができた要素にはposition指定により初期状態で生成されるルートスタックコンテキストから新しくスタックコンテキストに生まれ変わります。

 

つまりz-indexの”auto”と”0”の違いはスタックコンテキストが生成されるかされないか、中の子たちが格付け争いできる基準(地面)があるかないかである。

 

スタックコンテキストについて

スタックコンテキストとはz-index指定された要素の中にある子要素の集まりのことである。

 

z-index の値に数値指定された親がベースの層となり、中の子要素はそのベースをどのような数字であっても最下層とし子要素同士で層の順序を自由に変えることとができる。

 

ここで注意しなければならないのがz-index: auto;の親の中の子たちはベースがない状態(スタックコンテキストが生成されていない)であるので親要素の層より下に行くことができます。(地面がない状態)

 

さらにこのスタックコンテキスト(z-index指定された親を持つ複数の子要素)はその直属の親を基準とします。それ以外の別の親(兄弟要素)のz-indexの数値は領域外とみなされ順序を決める概念から外れます。

 

つまりz-indexはあくまで『同じスタックコンテキスト内』の重なり順の指定であり、違うスタックコンテキスト内の要素に対しては重なり順序を指定できない。

スタックコンテキストはそれぞれの中の子に対して

まず親兄弟の数値の大きいものが手前に表示されその中の子孫はすぐ外側の親の中でレベルの高低で順位を決めている。

なので図のA要素のスタックコンテキストがB要素の中のスタックコンテキストのレベル値より上であっても一番はじめのベースでの順列により上に行くことはないし兄弟エリアの世界には入れないのである。

 

 

完全初心者向けのHTML・CSS言語を使ってサイトを作るためのおすすめ教材本についても是非参考にしてください。

 

 

フリーターからWeb業界へ転職した話については以下より。