How to make one HTML page overlap the other

This is just a page, what happens is that the white part that is a <div> is over another <div> , this is done in CSS with the function z-index , example:

HTML

<div id="imagem"></div>
<div id="bg_branco"></div>

CSS

#imagem {
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
     position: absolute;
     background-image: url(http://www.onordeste.com/administrador/personalidades/imagemPersonalidade/34d6911fdfdc4097a974a4b612313f70923.JPG);
     z-index: 1;
}

#bg_branco {
     width: 100%;
     height: 50%;
     top: 70%;
     left: 0px;
     background-color: #FFF;
     position: absolute;
     z-index: 2;
}

Actually this effect was done using probably ::before above the background.

In the ::before element you can use transform:skewY() to have this effect.

Simple example (I put a small transparency for you to see that the image continues below the :: before. I also put a div after the image so you see how it looks in a standard layout )

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.bgimg {
    width: 100vw;
    height: 100vh;
    background: url(http://fillmurray.com/500/500) no-repeat ;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.bgimg::before {
    content: "";
    width: 100%;
    height: 135px;
    background-color: rgba(255, 255, 255, 0.9);
    right: 0;
    left: 0;
    bottom: -67px;
    position: absolute;
    transform: skewY(4deg);
    clear: both;
}
.corpo {
    background-color: lightgray;
    width:100%;
    height: 100px;
}

<div class="bgimg"></div>
    <div class="corpo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quaerat.</div>