html - child 相对于滚动祖 parent 的绝对位置

Question

我有一个 ul，在 li 里面，我有一个子 div。当我在 ul 中滚动时，我希望子 div 相对于 ul 保持定位。我能够在 ul 和 li 上使用 position static 获得所需的结果，但是当我将 ul 和 li 的位置更改为 relative 时，它​​不起作用。

  <ul class="grandparent">
    <li class="parent">
      <div class="child">
      Child
      </div>
      <div >
      <div>
      Spam
      </div>
      <div>
      Spam
      </div>
     <div>
      Spam
      </div>
     <div>
      Spam
      </div>
      </div>
    </li>
     <li>
      <div>
      Spam
      </div>
      <div>
      Spam
      </div>
     <div>
      Spam
      </div>
     <div>
      Spam
      </div>
      </div>
    </li>
    </ul>

这是工作副本的链接 https://jsfiddle.net/4jhzfm1s/1/

所以我的问题是，如何在相对定位 ul 和 li 的同时获得预期的效果。

Answer 1

如果您让父级滚动并只保留祖父级，它会按预期工作:

.grandparent {
  position: relative;
}
.parent {
  height: 100px;
  overflow: auto;
}
.child {
  position: absolute;
  top: 50px;
  left: 50%;
}

<ul class="grandparent">
  <li class="parent">
    <div class="child">
      Child
    </div>
    <div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
      <div>
        Spam
      </div>
    </div>
  </li>
</ul>

您还可以设置 top:auto 和 margin-top:50px ，这样您就可以在绝对(类似于固定)示例中设置多个元素 https://jsfiddle.net/4jhzfm1s/3/