Position HTML image does not scroll with screen

Question

Position HTML image does not scroll with screen

Navigation

#1 by (1 votes)
#2 by (1 votes)

-1

I'm creating a layout where the content is on top of an image, but I noticed that when you scroll the page, that image rolls together! Please, can anyone help me? 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%;
}

html5 css3 posicionamento

asked by anonymous 04.03.2017 / 06:03

2 answers

Accent error in IDE editor - Linux CSS Selectors 3: nth-child ()

score 1 · Answer 1

Sarah,

Your question is very confusing, but your problem should 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 position: absolute; tag from each of the two settings above, test it and see if it solves your problem. Just remembering that position: absolute; will leave the element practically fixed on the screen, along with the left and top tags you will set the ratio that the image will be displayed.

score 1 · Answer 2

Thank you all! I was able to solve this: It was using position:relative for the image that is below, and position:absolute on the elements that are on it and controlled the positioning of those elements with left and top . I solved using position:absolute and z-index:0 in the image that is below and in the elements I used position:absolute and z-index:1 . So:

#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;
}