| <!doctype html> |
| <html> |
| <head> |
| <style> |
| .contents { border:2px solid skyblue; background-color:#cccccc; margin-block-start:6px; margin-block-end:6px } |
| .fieldset { vertical-align:bottom; inline-size:320px; position:relative; display:inline-block; padding:40px; padding-block-start:0} |
| .legend { block-size:64px; inline-size: 284px; margin-block-end:34px;background-color:#3080f0; border:8px solid lightblue; font-size:48px } |
| .behind-box { position:absolute; border:12px solid navy; z-index:-1 } |
| .positioned { position:absolute; top:90px; bottom:22px; right:22px; left:22px; background-color:darkblue; z-index:-1 } |
| </style> |
| </head> |
| <body> |
| <div class=fieldset> |
| <div class="behind-box" style="left:0; top:34px; right:0; bottom:0;"></div> |
| <div class=legend>Legend Title</div> |
| |
| <div class=contents>Fieldset Contents</div> |
| |
| <div class=contents>More Fieldset Contents</div> |
| |
| <div class="positioned"></div> |
| |
| </div> |
| </body> |
| </html> |
