<h2 class="title">Negative Margin</h2>
<div class="block-one"></div>
<div class="block-two"></div>
:root {
    box-sizing: border-box;
}

*,
::before,
::after {
    box-sizing: inherit;
}

body {
    font-family: 'Lato', sans-serif;
    padding: 20px 40px;
    font-size: 120%;
    line-height: 1.5;
    color: #565656;
}

.block-one {
    height: 120px;
    background: rgba(96, 96, 205, 0.44);
    margin-bottom: 120px;
}

.block-two {
    height: 120px;
    background: rgba(255, 0, 0, 0.35);
    margin-top: -60px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.