out-of-flow-in-multicolumn-004.html (927B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-controls"> 3 <link rel="match" href="out-of-flow-in-multicolumn-004-ref.html"> 4 <!-- break-inside: avoid and break-before: column do not apply to absolute positioned elements. --> 5 <style> 6 #multicol { 7 column-count: 2; 8 column-fill: auto; 9 column-gap: 0px; 10 height: 40px; 11 width: 100px; 12 } 13 .rel { 14 position: relative; 15 } 16 .abs { 17 position: absolute; 18 width: 40px; 19 height: 30px; 20 background: green; 21 } 22 .content { 23 width: 20px; 24 height: 20px; 25 background: blue; 26 } 27 .inside { 28 break-inside: avoid; 29 } 30 .before { 31 break-before: column; 32 } 33 </style> 34 <div id="multicol"> 35 <div class="content"></div> 36 <div class="rel"> 37 <div class="abs inside"></div> 38 </div> 39 </div> 40 <div id="multicol"> 41 <div class="content"></div> 42 <div class="rel"> 43 <div class="abs before"></div> 44 </div> 45 </div>