backplate-bg-image-003-ref.html (1114B)
1 <!DOCTYPE html> 2 <head> 3 <link rel="stylesheet" type="text/css" href="ahem.css" /> 4 <title>Reference: Inline, relatively positioned backplate items should be drawn cooperatively with other backplates on the same line. Inline-block, relatively positioned backplate items should be drawn over other backplates on the same line. Absolutely positioned backplate items should be drawn over other page content.</title> 5 <style> 6 body { 7 font: 20px Ahem; 8 } 9 .fake-backplate { 10 background-color: white; 11 width: max-content; 12 } 13 .std { 14 border: 1px solid black; 15 padding: 15px; 16 } 17 .relpos { 18 position: relative; 19 left: 40px; 20 } 21 .i { 22 display: inline; 23 } 24 .ib { 25 display: inline-block; 26 } 27 .abspos { 28 position: absolute; 29 top: 0; 30 left: 0; 31 z-index: 999; 32 } 33 </style> 34 </head> 35 <body> 36 <div><span class="std relpos i">ppppp ppppp</span>ppppp ppppp</div> 37 <div><br><br><span class="std relpos ib fake"><span class="fake-backplate">ppppp ppppp</span></span> 38 <span>ppppp ppppp</span></div> 39 <div class="abspos"><span class="fake-backplate">ppppp ppppp</span></div> 40 </body>