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

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>

如您所见，第一个 li 中有一个 span 。并且箭头图像附加到此 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 的数量增加，将会有额外的行现在，这将使这个箭头对齐错误。为了更深入地了解这一点，我将在此处发布屏幕 任何人都可以帮我制作一个 css，使箭头驻留在 private-block div 之上，不管那里有多少行。

Answer 1

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

.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 */
}