z-index !! 重なり !!

z-index !! 重なり !!2015.2.5

自己紹介

■コスゲタツヤ（@keinkosuge）

30歳になる直前でデジハリに入学。

その後、何故か中のスタッフになり、２年弱程

STUDIO渋谷＆新宿の運営業務をメインに行う。

その後、Keinousの屋号で2014/10から制作活動専念。

自己紹介

■コスゲタツヤ（@keinkosuge）

・Keinousとして個人で制作活動

・新宿にある某会社に常駐

・デジタルハリウッドSTUDIO渋谷&新宿トレーナー

・unitopi（http://unitopi.com/ )さんでライター

・「HTML5minutes」などの勉強会に

　ちょこちょこ登壇させてもらっている。

http://unitopi.com/

鹿児島には特にゆかりはありません

NEW !!!!!!

2/26（木）in デジハリ御茶ノ水校４Fカフェテラス

技術的な話じゃなくて、仕事術とか生き方的な話をする

トークイベントに出ます。

https://atnd.org/events/62303

本日のテーマ：positionとz-index

CSSレイアウトはじめたてなどで

特に一番苦労するのが、要素の「重なり」

皆さんもpositionだの、z-indexだので、

苦労されたことはありませんか？

■positionについておさらい

・static：通常のフロー。これが初期値

・relative：一般的に『相対配置』といわれるやつ。

「position指定されてなかったら本来この位置にくるよね」って場所を基準にして、上

下左右（あるいは手前奥）に配置される。


青ボックスにposition:relative,left:10pxを指定。青ボックスが10px移動。


・absolute：一般的に『絶対配置』といわれるやつ。

通常はhtmlを基準に、上下左右（手前奥）の

どこに配置するかを指定する。

ここが

ファーストビュー上から下までがサイト全体


親要素にposition:relativeがかかっていると、

配置基準がhtmlからrelativeがついた要素に

変更になります。上から下までがサイト全体

内側のdiv

外側のdiv


position:absoluteが指定された要素は、

floatのように後続の要素が上に詰まって配置されます。


・fixed：一般的に『固定配置』といわれるやつ。

ブラウザの表示枠が配置する上での基準になります。


※赤丸の要素に以下を指定

position:fixed;

left:0;

bottom:0;

■z-indexについておさらい

z-indexは「重なりの順番（垂直位置の指定）」を指定するCSSプロパティです。数字

が大きいほど手前、小さいほど奥に配置されます。

（上限値は2,147,483,647だそうです。）


通常HTMLはCSSを何も指定していない場合、要素が上から下へと順番に並ぶた

め、要素が「重なる」という概念がありません


CSSのposition（static以外）が適用された要素があると、重なるという概念が生じる

ため、z-indexが自動的に付与されます。

（何も指定しない場合はz-index:autoが自動付与）

position（static以外）とz-indexはセット!

では実例

■HTML

<body><div class="block"> <div class="hoge">ほげほげ

<div class="ameame">あめあめ</div> <div class="furefure">ふれふれ</div> </div></div>

</body>

■CSS（※一部のみ抜粋）

.block（親）{ position:relative; z-index:10;}.hogehoge（子）{ position:absolute; z-index:-1;}

.ameame（孫）{ position:absolute; z-index:2;}.furefure（孫） { position:relative; z-index:9999;}

どういう順番で各要素が重なるか？

（垂直位置の配置がされるか？）

block → hogehoge → ameame → furefure

■答え

z-index:10 z-index:-1 z-index:2 z-index:9999

単純にz-indexの数値だけが

重なり順（垂直位置順）を決めるわけではない

■CSSの仕様書によると

１、基準となる要素（基準位置となる要素）

２、z-indexがマイナスの値を持つ基準要素の子要素

３、インラインレベル以外のpositionを指定していない要素

４、floatがかかっている要素及びその子孫要素

５、インラインレベルのpositionを指定していない要素

６、z-indexが0かあるいはautoの要素（及びその子孫要素）

７、z-indexがプラスの値をもつ要素（及びその子孫要素）

} まずはこれ！

ケース①：この場合

<div id=”wrapper”> <div id=”item”></div></div>

#wrapper { position:static; z-index:auto;}#item { position:relative; z-index:-1;}

こうなる！

#item(z-index:-1)

#wrapper(z-index:auto;）

ケース②：こうすると


#wrapper { position:relative; z-index:0;}#item { position:relative; z-index:-1;}

こうなる！

#wrapper(z-index:0;)

#item(z-index:-1)

ケース③：こうすると


#wrapper { position:relative; z-index:auto;}#item { position:relative; z-index:-1;}

こうなる！

#item(z-index:-1)

#wrapper(z-index:auto;）

■仕様書によるとキーワードは２つ

・スタックコンテキスト

要素の階層構造を形成する固まりのこと。

通常はhtmlを基準として、層が形成される。

position（static）やz-index（auto以外）が要素Aにつくと、

その子要素は要素Aを基準として垂直位置が決まる。

■仕様書によるとキーワードは２つ

・スタックレベル

要するにz-indexで指定された重なり順（垂直位置順）のこと。

？？？

まず覚えておいてほしいこと

positionがstatic以外で、かつz-indexがauto以外がつ指定された要素は、

新しいスタックコンテキストを形成する。

？？？

■通常

htmlを基準として要素が配置される。

■positionがstatic以外+z-index:auto以外

・positionがstatic以外・z-index:auto 以外

がついた要素（要素A）その子要素は、要素Aの中で、

重なりを形成する。

さっき何度か出たのがこの例のこと。

更にその中で同じことが起きると…

左記のようになる。

要するに

positionがstatic以外の値、z-indexがauto以外の値がついた要

素は、その子要素にあたるものは、z-indexの基準を考える時

に注意が必要！

今日のサンプル

http://jsdo.it/castero/zztf

最近熱いブログ

http://web-wizardry.net/

ありがとうございました。

Engineering

z-index !! 重なり !!