<html> <head> <title>Shows child element overlapping the parent element's container. Also shows background covering half of the parent element</title> </head> <body> <p class="lol">BLAH BLAH BLAH</p> <div> <em>1</em> <section> <h1>Header of a section</h1> <p>Section paragraph. The background color is in the section, which extens out through negative margins and positive padding. The negative top margin pulls the element up, while the padding-top produces extra background.</p> </section> </div> </body> </html>
.lol{ background: #000; margin: 0; height: 100px; color: #fff; } em{ margin-top: -25px; font-size: 40px; float: left; color: #151; } h1{ margin: 0; } section{ background: #ccc; padding: 20px; }