如何設置具有相對位置的div

Question

我有一個帶有background-image的<div> 。 在這個<div>我需要圖片（2 個箭頭）。 現在我想在background-image上設置這張圖片，但它只適用於position: absolute 。

我需要這個position: relative ，因為當我用position: absolute設置它時，我沒有得到滾動條。

它應該看起來像一個畫廊。 <div> “Pfeillinks”應該在左側，下一個“pfeilrechts”（不在腳本中）應該在右側。

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

這是一個工作示例。

 .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>