The Z dimension
This talk is about browsers
Browsers paint
• Painter's algorithm
• Back-to-front
• Every element independently
• There is no depth only order
<div class="a"> A <div class="c">C</div> <div class="d">D</div> </div> <div class="b">B</div>
Glen's pro-tip #1 for navigating the Z dimension
box-shadow ftw!
div:hover, span:hover { box-shadow: 0 0 40px 40px black; }
<div class="a"> A <div class="c">C</div> <div class="d">D</div> </div> <div class="b">B</div>
html { color: red; }
<div class="a"> A <div class="c">C</div> <div class="d">D</div> </div> <div class="b">B</div>
span { background-color: hsl(45,80%,80%); }
<div class="a"> A <div class="c">C</div> <div class="d">
<span>INLINE</span>
</div> </div> <div class="b">B</div>
.fl { float: left; }
<div class="a"> A <div class="c">C</div>
<div class="fl">FLOATED</div>
<div class="d"> <span>INLINE</span> </div> </div> <div class="b">B</div>
.pos { position: relative; }
<div class="a"> A <div class="c">C</div> <div class="fl">FLOATED</div>
<div class="pos">POSITIONED</div>
<div class="d"> <span>INLINE</span> </div> </div> <div class="b">B</div>
.neg { position: absolute; z-index: -1; top: 250px; right: 20px; }
<div class="a"> A <div class="c">C</div> <div class="fl">FLOATED</div> <div class="pos">POSITIONED</div> <div class="d"> <span>INLINE</span> </div>
<div class="neg">NEGATIVE</div>
</div> <div class="b">B</div>
.pve { position: absolute; z-index: 1; top: 20px; right: 20px; }
<div class="pve">POSITIVE</div>
<div class="a"> A <div class="c">C</div> <div class="fl">FLOATED</div> <div class="pos">POSITIONED</div> <div class="d"> <span>INLINE</span> </div> <div class="neg">NEGATIVE</div> </div> <div class="b">B</div>
CSS
Drawn back-to-front:
• Positioned + neg z-index
• Block elements
• Floated elements
• Inline elements
• Positioned + z-index auto,0
• Positioned + z-index > 0
Stacking contexts
Stacking contexts:
• Encapsulates an element & its children
• Seems to 'flatten' an element
• Element & children drawn together
.a { position: relative; z-index: auto; }
<div class="pve">POSITIVE</div>
<div class="a">
A <div class="c">C</div> <div class="fl">FLOATED</div> <div class="pos">POSITIONED</div> <div class="d"> <span>INLINE</span> </div>
<div class="neg">NEGATIVE</div> </div>
<div class="b">B</div>
.a { position: relative;
z-index: 0; }
<div class="pve">POSITIVE</div>
<div class="a">
A <div class="c">C</div> <div class="fl">FLOATED</div> <div class="pos">POSITIONED</div> <div class="d"> <span>INLINE</span> </div>
<div class="neg">NEGATIVE</div> </div>
<div class="b">B</div>
Stacking contexts:
• Opacity < 1
• Position: fixed (Chrome & Mobiles)
• Position: !static && z-index: !auto
• -webkit-transform
• -webkit-filter
• CSS regions & pages
Learn the theory and apply it.
Measure the browser and reason about it.
Chrome is amazing
DEMO #1
Google Chrome Canary:
--enable-threaded-compositing --force-compositing-mode --enable-impl-side-painting --enable-skia-benchmarking --allow-webui-compositing