z-index !! 重なり !!
TRANSCRIPT
z-index !! 重なり !!2015.2.5
自己紹介
■コスゲタツヤ (@keinkosuge)
30歳になる直前でデジハリに入学。
その後、何故か中のスタッフになり、2年弱程
STUDIO渋谷&新宿の運営業務をメインに行う。
その後、Keinousの屋号で2014/10から制作活動専念。
自己紹介
■コスゲタツヤ (@keinkosuge)
・Keinousとして個人で制作活動
・新宿にある某会社に常駐
・デジタルハリウッドSTUDIO渋谷&新宿トレーナー
・unitopi(http://unitopi.com/ )さんでライター
・「HTML5minutes」などの勉強会に
ちょこちょこ登壇させてもらっている。
鹿児島には特にゆかりはありません
NEW !!!!!!
2/26(木)in デジハリ御茶ノ水校4Fカフェテラス
技術的な話じゃなくて、仕事術とか生き方的な話をする
トークイベントに出ます。
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の仕様書によると
1、基準となる要素(基準位置となる要素)
2、z-indexがマイナスの値を持つ基準要素の子要素
3、インラインレベル以外のpositionを指定していない要素
4、floatがかかっている要素及びその子孫要素
5、インラインレベルのpositionを指定していない要素
6、z-indexが0かあるいはautoの要素(及びその子孫要素)
7、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;)
■仕様書によるとキーワードは2つ
・スタックコンテキスト
要素の階層構造を形成する固まりのこと。
通常はhtmlを基準として、層が形成される。
position(static)やz-index(auto以外)が要素Aにつくと、
その子要素は要素Aを基準として垂直位置が決まる。
■仕様書によるとキーワードは2つ
・スタックレベル
要するに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/
ありがとうございました。