flexbox-position-fixed-2.xhtml (2017B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 Testcase with fixed-position children of a flex container. 8 In this testcase, we simply specify "position: fixed" without 9 actually doing any positioning, to test the "static position" of these 10 children. 11 --> 12 <html xmlns="http://www.w3.org/1999/xhtml"> 13 <head> 14 <style> 15 div.containingBlock { 16 top: 15px; 17 left: 20px; 18 height: 400px; 19 position: absolute; 20 border: 2px dashed purple; 21 } 22 .fixedpos { 23 position: fixed; 24 border: 2px dotted black; 25 } 26 div.flexbox { 27 width: 200px; 28 height: 100px; 29 display: flex; 30 } 31 div.a { 32 flex: 1 0 auto; 33 width: 30px; 34 height: 100px; 35 background: lightgreen; 36 } 37 div.b { 38 flex: 2 0 auto; 39 width: 20px; 40 height: 100px; 41 background: yellow; 42 } 43 div.inflex { 44 flex: none; 45 width: 20px; 46 height: 100px; 47 background: gray; 48 } 49 div.noFlexFn { 50 width: 16px; 51 height: 16px; 52 background: teal; 53 } 54 </style> 55 </head> 56 <body> 57 <div class="containingBlock"> 58 <!-- First child fixedpos: --> 59 <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div> 60 <!-- Second child fixedpos: --> 61 <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div> 62 <!-- Middle child fixedpos: --> 63 <div class="flexbox" 64 ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div> 65 <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: --> 66 <div class="flexbox" style="justify-content: space-around" 67 ><div class="inflex"/><div class="inflex"/><div class="inflex" 68 /><div class="noFlexFn fixedpos"/><div class="inflex"/></div> 69 </div> 70 </body> 71 </html>