html - 将图像放置在另一个容器上

我的HTML就是这样

    <div class="container-panel">
  <div class="inner-bannerbg">
  </div>
  <div class="home-second-holder">
    <div class="wrapper clearfix">
      <ul class="service-menu">
        <li>
          <a href="/qw/privat/" class="inner-nav inner-nav01 active">Privat</a>
          <span class="arrow01"></span>
        </li>
        <li>
          <a href="/qw/lorem/" class="inner-nav inner-nav02">Lorem</a>

        </li>
        <li>
          <a href="/qw/some/" class="inner-nav inner-nav03">some</a>

        </li>
        <li>
          <a href="/qw/numquam/" class="inner-nav inner-nav04">numquam</a>

        </li>
        <li>
          <a href="/loesninger/ducimus/" class="inner-nav inner-nav05">ducimus</a>

        </li>
        <li>
          <a href="/qw/2/" class="inner-nav inner-nav06">2</a>

        </li>
        <li>
          <a href="/qw/4/" class="inner-nav inner-nav07">4</a>

        </li>
      </ul>
    </div>
  </div>
  <div class="private-block">
  </div>
</div>


如您所见,第一个 span内部有一个 li,并且箭头图像附加到该 span上。
此范围的CSS

    ul.service-menu li span.arrow01 {
position: absolute;
width: 100%;
height: 44px;
background: url(../Images/active-arrow01.png) no-repeat center bottom;
left: 0;
bottom: -161px;
}


使用这个css,我安排了箭头使其直接指向当前活动的 li。并定位在我的 private-block div上方。此定位完全取决于我的CSS

 bottom: -161px;


问题是随着 li的数量动态变化,有时可能会出现额外的行并破坏我的风格。如果 li的数量增加,则会出现额外的行,这将使此箭头对齐错误。为此,我将在此处发布屏幕

任何人都可以帮助我制作一个使箭头位于 private-block div上方的css,无论那里有多少行。

最佳答案

将箭头定义为.wrapper的伪元素。不要忘记为position: relative设置.wrapper

.wrapper {
    position: relative;
}

.wrapper::after {
    position: absolute;
    width: 100%;
    height: 44px;
    content: url(../Images/active-arrow01.png); /* notice that the image becomes the "content" of the pseudo-element, not the background */
    left: 0;
    bottom: 0; /* the arrow will always be at the bottom of teh .wrapper */
}