Question

我有background-image <div>。在这个background-image我需要图片（2箭头）。现在我想在position: absolute上设置此图片，但它仅适用于position: relative。

我需要使用position: absolute，因为当我使用<div>设置它时，我没有得到滚动条。

它应该看起来像一个画廊。 #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; }“Pfeillinks”应位于左侧，下一个“pfeilrechts”（不在脚本中）应位于右侧。

CSS：

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

HTML：

split

Answer 1

这是一个有效的例子。

＆＃13;

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

＆＃13;

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

＆＃13;

如何设置div与位置相对

1 个答案: