legend-tall-ref.html (572B)
1 <!DOCTYPE html> 2 <title>Reference for tall legend</title> 3 <style> 4 body, p { margin: 0; } 5 .legend { position: absolute; height: 160px; margin-left: 20px; inline-size: fit-content; background: lime } 6 .fieldset { 7 position: absolute; 8 z-index: -1; 9 margin-top: calc((/* half legend height */ 160px / 2) - (/* half top border */ 20px / 2)); 10 background: green; 11 height: 40px; 12 left: 0; 13 right: 0; 14 } 15 .hello { margin-top: 160px; margin-left: 20px; } 16 </style> 17 <p>There should be no red.</p> 18 <div class=legend>X</div> 19 <div class=fieldset></div> 20 <div class=hello>HELLO</div>