在列表元素中定位绝对值

Question

我正在尝试根据视口定位一些列表的元素,但它们最终会坚持他们的父母.

要重现这个问题,我只需要创建一个绝对定位元素的列表:

body {
  background-color: lightgray;
}

ul {
  position: absolute;
  top: 50px;
  left: 50px;
  list-style: none;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
}

<ul>
  <li>
    <div class="element">
      <p>
        Element
      </p>
    </div>
  </li>
</ul>

如您所见,元素不位于视口的左上角,而是相对于视口ul.

我错过了什么吗？它可能是li元素的静态位置吗？

Answer 1

尝试使用position: fixed替代。position: absolute将相对于最近定位的祖先（在本例中为ulwith position: absolute）绝对定位元素，而position: fixed将相对于视口*定位元素。

代码片段：

body {
  background-color: lightgray;
}

ul {
  position: absolute;
  top: 50px;
  left: 50px;
  list-style: none;
}

.element {
  position: fixed;
  top: 0;
  left: 0;
  background-color: red;
}

<ul>
  <li>
    <div class="element">
      <p>
        Element
      </p>
    </div>
  </li>
</ul>

* 有一些例外，例如transform祖先上的 a 会破坏此行为。