View
180
Download
0
Category
Preview:
Citation preview
z-index !! 重なり !!2015.2.5
自己紹介
■コスゲタツヤ （@keinkosuge）
30歳になる直前でデジハリに入学。
その後、何故か中のスタッフになり、２年弱程
STUDIO渋谷＆新宿の運営業務をメインに行う。
その後、Keinousの屋号で2014/10から制作活動専念。
自己紹介
■コスゲタツヤ （@keinkosuge）
・Keinousとして個人で制作活動
・新宿にある某会社に常駐
・デジタルハリウッドSTUDIO渋谷&新宿トレーナー
・unitopi（http://unitopi.com/ )さんでライター
・「HTML5minutes」などの勉強会に
ちょこちょこ登壇させてもらっている。
鹿児島には特にゆかりはありません
NEW !!!!!!
2/26（木）in デジハリ御茶ノ水校４Fカフェテラス
技術的な話じゃなくて、仕事術とか生き方的な話をする
トークイベントに出ます。
https://atnd.org/events/62303
本日のテーマ：positionとz-index
CSSレイアウトはじめたてなどで
特に一番苦労するのが、要素の「重なり」
皆さんもpositionだの、z-indexだので、
苦労されたことはありませんか？
■positionについておさらい
・static：通常のフロー。これが初期値
・relative：一般的に『相対配置』といわれるやつ。
「position指定されてなかったら本来この位置にくるよね」って場所を基準にして、上
下左右（あるいは手前奥）に配置される。
■positionについておさらい
青ボックスにposition:relative,left:10pxを指定。青ボックスが10px移動。
■positionについておさらい
・absolute：一般的に『絶対配置』といわれるやつ。
通常はhtmlを基準に、上下左右（手前奥）の
どこに配置するかを指定する。
ここが
ファーストビュー上から下までがサイト全体
■positionについておさらい
親要素にposition:relativeがかかっていると、
配置基準がhtmlからrelativeがついた要素に
変更になります。上から下までがサイト全体
内側のdiv
外側のdiv
■positionについておさらい
position:absoluteが指定された要素は、
floatのように後続の要素が上に詰まって配置されます。
■positionについておさらい
・fixed：一般的に『固定配置』といわれるやつ。
ブラウザの表示枠が配置する上での基準になります。
■positionについておさらい
※赤丸の要素に以下を指定
position:fixed;
left:0;
bottom:0;
■z-indexについておさらい
z-indexは「重なりの順番（垂直位置の指定）」を指定するCSSプロパティです。数字
が大きいほど手前、小さいほど奥に配置されます。
（上限値は2,147,483,647だそうです。）
■z-indexについておさらい
通常HTMLはCSSを何も指定していない場合、要素が上から下へと順番に並ぶた
め、要素が「重なる」という概念がありません
■z-indexについておさらい
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;）
ケース②：こうすると
<div id=”wrapper”> <div id=”item”></div></div>
#wrapper { position:relative; z-index:0;}#item { position:relative; z-index:-1;}
こうなる！
#wrapper(z-index:0;)
#item(z-index:-1)
ケース③：こうすると
<div id=”wrapper”> <div id=”item”></div></div>
#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/
ありがとうございました。
Recommended