ul列表中的li里的某一个元素，如何置于顶层，不被后面的li子项遮挡？

Question

正常情况

异常情况

如图，这是一个ul的列表

在每个li里有个名为 popu 的div，可以通过长按显示和隐藏

但默认后面的li的层级比前面的li要高，所以前面li里的 popu 会被后面的li遮挡

请问要如何才能让这个 popu 始终显示在上层呢？

我知道一般用z-index来决定层级关系，但z-index似乎必须要绝对定位才能生效……我目前不知道要如何使用才对

目前我的代码结构大概类似这样

<ul>
  <li>
    <div class="content">内容内容内容内容</div>
    <div class="pupu">
      弹出层
    </div>
  </li>
  <li>
    <div class="content">内容内容内容内容</div>
    <div class="pupu">
      弹出层
    </div>
  </li>
  <li>
    <div class="content">内容内容内容内容</div>
    <div class="pupu">
      弹出层
    </div>
  </li>
</ul>

Answer 1

你可以popu元素的父元素li设置position：relative，然后popu元素设置position：absolute啊