使图像定位在另一个容器上

Question

我的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的数量增加，将会有额外的行存在，这将使这个arrow align wrong。要了解更多内容，我将在此处发布屏幕 任何人都可以帮助我创建一个css，使箭头位于private-block div之上，neverthles有多少行。

Answer 1

将箭头定义为.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 */
}