MODERN ART STONE モダンアートストーン...MODERN ART STONE KS-MA工法(鎧張り工法)の特長 KS-MA工法(以降 鎧張り工法)とは、目地重ね代部の重ね
z-index !! 重なり !!
-
Upload
tatsuya-kosuge -
Category
Engineering
-
view
178 -
download
0
Transcript of z-index !! 重なり !!
![Page 1: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/1.jpg)
z-index !! 重なり !!2015.2.5
![Page 2: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/2.jpg)
自己紹介
■コスゲタツヤ (@keinkosuge)
30歳になる直前でデジハリに入学。
その後、何故か中のスタッフになり、2年弱程
STUDIO渋谷&新宿の運営業務をメインに行う。
その後、Keinousの屋号で2014/10から制作活動専念。
![Page 3: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/3.jpg)
自己紹介
■コスゲタツヤ (@keinkosuge)
・Keinousとして個人で制作活動
・新宿にある某会社に常駐
・デジタルハリウッドSTUDIO渋谷&新宿トレーナー
・unitopi(http://unitopi.com/ )さんでライター
・「HTML5minutes」などの勉強会に
ちょこちょこ登壇させてもらっている。
![Page 4: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/4.jpg)
鹿児島には特にゆかりはありません
![Page 5: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/5.jpg)
NEW !!!!!!
2/26(木)in デジハリ御茶ノ水校4Fカフェテラス
技術的な話じゃなくて、仕事術とか生き方的な話をする
トークイベントに出ます。
https://atnd.org/events/62303
![Page 6: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/6.jpg)
本日のテーマ:positionとz-index
CSSレイアウトはじめたてなどで
特に一番苦労するのが、要素の「重なり」
皆さんもpositionだの、z-indexだので、
苦労されたことはありませんか?
![Page 7: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/7.jpg)
■positionについておさらい
・static:通常のフロー。これが初期値
・relative:一般的に『相対配置』といわれるやつ。
「position指定されてなかったら本来この位置にくるよね」って場所を基準にして、上
下左右(あるいは手前奥)に配置される。
![Page 8: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/8.jpg)
■positionについておさらい
青ボックスにposition:relative,left:10pxを指定。青ボックスが10px移動。
![Page 9: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/9.jpg)
■positionについておさらい
・absolute:一般的に『絶対配置』といわれるやつ。
通常はhtmlを基準に、上下左右(手前奥)の
どこに配置するかを指定する。
ここが
ファーストビュー上から下までがサイト全体
![Page 10: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/10.jpg)
■positionについておさらい
親要素にposition:relativeがかかっていると、
配置基準がhtmlからrelativeがついた要素に
変更になります。上から下までがサイト全体
内側のdiv
外側のdiv
![Page 11: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/11.jpg)
■positionについておさらい
position:absoluteが指定された要素は、
floatのように後続の要素が上に詰まって配置されます。
![Page 12: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/12.jpg)
■positionについておさらい
・fixed:一般的に『固定配置』といわれるやつ。
ブラウザの表示枠が配置する上での基準になります。
![Page 13: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/13.jpg)
■positionについておさらい
※赤丸の要素に以下を指定
position:fixed;
left:0;
bottom:0;
![Page 14: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/14.jpg)
■z-indexについておさらい
z-indexは「重なりの順番(垂直位置の指定)」を指定するCSSプロパティです。数字
が大きいほど手前、小さいほど奥に配置されます。
(上限値は2,147,483,647だそうです。)
![Page 15: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/15.jpg)
■z-indexについておさらい
通常HTMLはCSSを何も指定していない場合、要素が上から下へと順番に並ぶた
め、要素が「重なる」という概念がありません
![Page 16: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/16.jpg)
■z-indexについておさらい
CSSのposition(static以外)が適用された要素があると、重なるという概念が生じる
ため、z-indexが自動的に付与されます。
(何も指定しない場合はz-index:autoが自動付与)
position(static以外)とz-indexはセット!
![Page 17: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/17.jpg)
では実例
![Page 18: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/18.jpg)
■HTML
<body><div class="block"> <div class="hoge">ほげほげ
<div class="ameame">あめあめ</div> <div class="furefure">ふれふれ</div> </div></div>
</body>
![Page 19: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/19.jpg)
■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;}
![Page 20: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/20.jpg)
どういう順番で各要素が重なるか?
(垂直位置の配置がされるか?)
![Page 21: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/21.jpg)
block → hogehoge → ameame → furefure
■答え
z-index:10 z-index:-1 z-index:2 z-index:9999
![Page 22: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/22.jpg)
単純にz-indexの数値だけが
重なり順(垂直位置順)を決めるわけではない
![Page 23: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/23.jpg)
■CSSの仕様書によると
1、基準となる要素(基準位置となる要素)
2、z-indexがマイナスの値を持つ基準要素の子要素
3、インラインレベル以外のpositionを指定していない要素
4、floatがかかっている要素及びその子孫要素
5、インラインレベルのpositionを指定していない要素
6、z-indexが0かあるいはautoの要素(及びその子孫要素)
7、z-indexがプラスの値をもつ要素(及びその子孫要素)
} まずはこれ!
![Page 24: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/24.jpg)
![Page 25: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/25.jpg)
ケース①:この場合
<div id=”wrapper”> <div id=”item”></div></div>
#wrapper { position:static; z-index:auto;}#item { position:relative; z-index:-1;}
![Page 26: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/26.jpg)
こうなる!
#item(z-index:-1)
#wrapper(z-index:auto;)
![Page 27: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/27.jpg)
ケース②:こうすると
<div id=”wrapper”> <div id=”item”></div></div>
#wrapper { position:relative; z-index:0;}#item { position:relative; z-index:-1;}
![Page 28: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/28.jpg)
こうなる!
#wrapper(z-index:0;)
#item(z-index:-1)
![Page 29: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/29.jpg)
ケース③:こうすると
<div id=”wrapper”> <div id=”item”></div></div>
#wrapper { position:relative; z-index:auto;}#item { position:relative; z-index:-1;}
![Page 30: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/30.jpg)
こうなる!
#item(z-index:-1)
#wrapper(z-index:auto;)
![Page 31: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/31.jpg)
■仕様書によるとキーワードは2つ
・スタックコンテキスト
要素の階層構造を形成する固まりのこと。
通常はhtmlを基準として、層が形成される。
position(static)やz-index(auto以外)が要素Aにつくと、
その子要素は要素Aを基準として垂直位置が決まる。
![Page 32: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/32.jpg)
■仕様書によるとキーワードは2つ
・スタックレベル
要するにz-indexで指定された重なり順(垂直位置順)のこと。
![Page 33: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/33.jpg)
???
![Page 34: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/34.jpg)
まず覚えておいてほしいこと
positionがstatic以外で、かつz-indexがauto以外がつ指定された要素は、
新しいスタックコンテキストを形成する。
![Page 35: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/35.jpg)
???
![Page 36: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/36.jpg)
■通常
htmlを基準として要素が配置される。
![Page 37: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/37.jpg)
■positionがstatic以外+z-index:auto以外
・positionがstatic以外 ・z-index:auto 以外
がついた要素(要素A)その子要素は、要素Aの中で、
重なりを形成する。
![Page 38: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/38.jpg)
さっき何度か出たのがこの例のこと。
![Page 39: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/39.jpg)
更にその中で同じことが起きると…
左記のようになる。
![Page 40: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/40.jpg)
要するに
positionがstatic以外の値、z-indexがauto以外の値がついた要
素は、その子要素にあたるものは、z-indexの基準を考える時
に注意が必要!
![Page 41: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/41.jpg)
今日のサンプル
http://jsdo.it/castero/zztf
![Page 42: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/42.jpg)
最近熱いブログ
http://web-wizardry.net/
![Page 43: z-index !! 重なり !!](https://reader033.fdocuments.net/reader033/viewer/2022052207/55af451d1a28ab5d208b46bc/html5/thumbnails/43.jpg)
ありがとうございました。