How to achieve this effect with css - html

Question

I would to be able to create this effect shown here:
Where a block of a section is pushed up on top of another section, it's often times a block of text that does it, but I couldn't find a good example of it so my s/s uses an image.
I know this is a very common effect but I don't know its name so I am struggling to find guides on it. If someone can just give me the name of this CSS effect that'd be awesome so I can search for it on the web and learn how to achieve this effect.

Answer 1

I used a negative margin on the overlaying element: https://jsfiddle.net/2ezwtj1j/3/
html
<div id="landing"></div>
<div id="card">
<h1>My Sick Header</h1>
<p>My amazing content.</p>
</div>
css
#landing {
margin:0px;
padding-bottom: 200px;
background: #7703a5;
background: -moz-linear-gradient(-45deg, #7703a5 0%, #00c7ef 100%);
background: -webkit-linear-gradient(-45deg, #7703a5 0%,#00c7ef 100%);
background: linear-gradient(135deg, #7703a5 0%,#00c7ef 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7703a5', endColorstr='#00c7ef',GradientType=1 );
}
#card {
padding: 1vw;
box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
width:80%;
height:300px;
background:#fff;
margin: 0 auto;
margin-top:-100px;
font-family: sans-serif;
}

Answer 2

In their case, they used absolute positioning. You can also move an element up (into another section) using transform: translate();. Below is an example.
BTW, you can always use your dev tools to inspect the page and see what CSS they used to position that element. Here is the URL for that layout in your screenshot. http://unbounce.com/landing-page-template/mova/
* {margin:0;}
section {
background: red;
height: 100vh;
position: relative;
}
section:nth-child(2) {
background: blue;
}
h1 {
background: #fff;
position: absolute;
top: -.5em;
width: 50%;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
<section></section>
<section><h1>hello</h1></section>

Answer 3

You can achieve this by using the negative top margin take a look:
https://jsfiddle.net/7Lb5x1he/
HTML
<div></div>
<div></div>
<div></div>
CSS
div {
height: 200px;
border: 1px solid black;
}
div:nth-of-type(1) {
background: lightblue;
}
div:nth-of-type(2) {
background: grey;
}
div:nth-of-type(3) {
width: 60%;
margin: -300px auto 0 auto;
background: white;
}