Download as PDF, PPTX
![Wintercatalog copy[1]](https://cdn.slidesharecdn.com/ss_thumbnails/wintercatalogcopy1-130123134335-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
z-index !! 重なり !!
- 1. z-index !! 重なり!! 2015.2.5
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. ■HTML <body> <div class="block"> <div class="hoge">ほげほげ <divclass="ameame">あめあめ</div> <div class="furefure">ふれふれ</div> </div> </div> </body>
- 19.
- 20.
- 21. block → hogehoge→ ameame → furefure ■答え z-index:10 z-index:-1 z-index:2 z-index:9999
- 22.
- 23.
- 25. ケース①：この場合 <div id=”wrapper”> <div id=”item”></div> </div> #wrapper{ position:static; z-index:auto; } #item { position:relative; z-index:-1; }
- 26.
- 27. ケース②：こうすると <div id=”wrapper”> <div id=”item”></div> </div> #wrapper{ position:relative; z-index:0; } #item { position:relative; z-index:-1; }
- 28.
- 29. ケース③：こうすると <div id=”wrapper”> <div id=”item”></div> </div> #wrapper{ position:relative; z-index:auto; } #item { position:relative; z-index:-1; }
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.