Image HTML position does not scroll with the screen

Question

I’m creating a layout where the content is on top of an image, but I realized that when scrolling the page this image scrolls together! please can anyone help? tks. There goes html code:

    <section id="corpo-topo" class="row">
    <div id="corpo-img">
        <img id="background-img" src="image/palestra.jpg">
        <div id="rede-social">

        </div>
        <!--Slide-->
        <figure id="box-img">
            <a id="prev" href="javascript:menos()"> < </a> 
            <a id="next" href="javascript:mais()"> > </a>
            <a id="aimg"><img id="img-slide"></a>
        </figure>
    </div>
</section>

<section id="corpo" class="row">
    <div id="formulario">
        <img id="icone-img" src="image/icone-cv.png">
        <form id="form">
            <center><h1 id="form-frase">Clique no botão abaixo para enviar o seu Currículo.</h1>
            <a href="#modal"><button id="button-enviar">ENVIE SEU CURRÍCULO</button></a></center>
        </form>
    </div>

css:

#menu{
    margin:0;
    margin-right: auto;
    margin-left: auto;
    padding:5px 15%;
    list-style: none;
    text-decoration: none;
}

#corpo-img{
    position:relative;
    top:20px;
    width:100%;
}

#background-img{
    width:100%;
    position: fixed;
}

#corpo-img > #rede-social{
    position:absolute;
    left:0%;
    margin-left:0px;
    top:70%;
    margin-top:0px;
}

#rede-social ul{
    list-style: none;
    text-decoration: none;
    margin:0;
    padding: 0 0%;
}

#rede-social ul li{
    display: block;
    padding: 5% 0;
}

#box-img{
    position:absolute;
    left:25%;
    margin:0;
    top:70%;
    /*width:100%;
    height:100%;*/
    padding-top:2%;
}   

Answer 1

Sarah,

Your question is very confusing, but your problem must be here:

#corpo-img > #rede-social{
    position:absolute;
    left:0%;
    margin-left:0px;
    top:70%;
    margin-top:0px;
}

#box-img{
    position:absolute;
    left:25%;
    margin:0;
    top:70%;
    /*width:100%;
    height:100%;*/
    padding-top:2%;
}   

Remove the tag position: absolute; of each of the above two definitions, test and check if it solves your problem. Just remember that position: absolute; will leave the element practically fixed on the screen, along with the tags left and top you will fix the ratio that the image will be displayed.

Answer 2

Thank you all so much! I was able to solve it like this: Was using position:relative to the image below, and position:absolute and controlled the positioning of these elements with left and top. I solved using position:absolute and z-index:0 in the image below and in the elements I used position:absolute and z-index:1. Thus:

#corpo-img{
   position:absolute;
   z-index:0;
   width:100%;
}
#background-img{
    width:100%;
    position:absolute;
}
#corpo-img > #rede-social{
    position:absolute;
    z-index:1;
    margin-left:0px;
    margin-top:0px;
    padding:0;
}