相对于滚动祖父母的绝对位置孩子

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

如果您制作父卷轴并仅保留相对祖父母，则按预期工作：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

你也可以设置top：auto和margin-top：50px，这样你就可以设置绝对多个元素（相似的固定）例https://jsfiddle.net/4jhzfm1s/3/

Answer 2

所以你想让.child留在哪里，无论你向右滚动的地方？如果是这种情况，我会将ul包装在一个div中并按如下方式给出position: relative：

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

<div class="wrapper">
  <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>
</div>