How to set div with position relative

Question

I have a <div> with an background-image . In this <div> I need to Picture (2 arrows). Now I want to set this picture over the background-image , but it works only with position: absolute .

I need this with position: relative , because when I set it with position: absolute , I don't get the scrollbar.

It should look like a gallery. The <div> "Pfeillinks" should be on the left side and the next one "pfeilrechts" (not in the script) should be on the right side.

CSS:

#galerie {
    border: 0px solid #ff0000;
    width: 90vw;
    height: 70vh;
    overflow: auto;
    padding-left: 3vw;
    margin-top: 3vh;
}

#flexportfoliogalerie {
    display: flex;
    width: 83vw;
    border: 0px solid #ffff00;
    margin-left: 0vw;
    overflow: hidden;
    flex-wrap: wrap;
}
#portfoliogalerieoverview {
    width: 15vw;
    height: 10vh;
    border: 0px solid #0fffff;
    z-index:0;
    overflow: hidden;
}

#portfoliogaleriefull {
    width: 82vw;
    height: 50vh;
    max-height: 50vh;
    border: 0px solid #000000;
}

#spacegalerieoverview {
    width: 1vw;
}

HTML:

 <div id = 'galerie'>
    <div id = 'flexportfoliogalerie'>

        <script>
            for (i = 0; i<count;i++)
            {
                  document.write("<div id = 'portfoliogalerieoverview' style = 'background-size: contain; background-image: url(./admin/cms/bx/"+kl_bild_array[i]+"); background-repeat: no-repeat;'></div><div id = 'spacegalerieoverview'></div>");
            }
        </script>
    </div>
    <br>
    <script>
          document.write("<div id = 'portfoliogaleriefull' style = ' background-size: contain; background-image: url(./admin/cms/bx/"+gr_bild_array[0]+"); background-repeat: no-repeat;'><div id = 'pfeillinks' style = 'background-image: url(./images/links.png); background-repeat: no-repeat;'></div>");
    </script>
    <div id = 'galerietext'>
        <script>
              document.write("<span style = 'font-family: sensation;'>"+bez_bild_array[0]+"</span>");
        </script>
    </div>

Answer 1

This is a working example.

 .gallery { display: inline-block; width: 100%; position: relative; height: 250px; background: url(http://acadtech.gwu.edu/sites/acadtech.gwu.edu/files/image/13030015p3-app%20icons.jpg) 0 0 no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .gallery .icon { position: absolute; top: 50%; margin-top: -16px; height: 32px; width: 32px; cursor: pointer; } .gallery .icon.next { right: 0px; } .gallery .icon.previous { left: 0px; }

 <div class="gallery"> <img class="icon next" src="http://www.keyano.ca/DesktopModules/LiveRotator/Resources/Images/NavigationImages/Default-next.png" alt="" /> <img class="icon previous" src="http://www.keyano.ca/DesktopModules/LiveRotator/Resources/Images/NavigationImages/Default-prev.png" alt="" /> </div>