将ABSOLUTE位置转换为FIXED

Question

我有一个带有工具提示的div，我必须将它的位置从绝对转换为固定。

当我只是更改属性时，它只会变为奇怪的随机位置。

我该如何追踪？

Answer 1

您的绝对定位元素是根据最后相对定位的祖先的位置定位的。看下面的片段。固定只是基于窗口本身。如果要查找需要设置固定位置的坐标，则需要使用JavaScript来获取这些坐标。

.relative {
  position:relative;
  margin-top:80px;
  margin-left:120px;
  background:#CCC;
  }

.absolute {
  position:absolute;
  top:20px;
  left:40px;
  background:#888;
  color:white;
}

.fixed {
  position:fixed;
  top:20px;
  left:40px;
  background:#333;
  color:white
}

<div class="relative">
  <p>I'm positioned relatively. The absolute div will be positioned relatively to me.</p>
  <div class="absolute">
    <p>I'm offset from my relatively-positioned parent</p>
  </div>
  <div class="fixed">
    <p>I'm a child of the relative position, but I'm fixed so I'm offset from the window</p>
  </div>
</div>