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会将元素相对于最近的定位祖先（在这种情况下，ul与position: absolute）绝对定位，而position: fixed将相对于视口*定位元素。

代码段：

＆＃13;

body {
  background-color: lightgray;
}

ul {
  position: absolute;
  top: 50px;
  left: 50px;
  list-style: none;
}

.element {
  position: fixed;
  top: 0;
  left: 0;
  background-color: red;
}

＆＃13;

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

＆＃13;

*这有一些例外，例如祖先的transform会破坏这种行为。

Answer 2

如果您想要相对于视口设置元素的位置，则父（{{1}}）不应该有ul，所以：

方法1）移除position:absolute的{{1}}：

＆＃13;

position: absolute

＆＃13;

ul

＆＃13;

方法2）更改html代码：

＆＃13;

body {
  background-color: lightgray;
}

ul {
  top: 50px;
  left: 50px;
  list-style: none;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
}

＆＃13;

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

＆＃13;

Answer 3

请试试这个。移除position:absolute课程中的ul并提供position:relative。并且body和ul元素设置了默认边距。所以删除它。

body {
  background-color: lightgray;
  margin:0;
}

ul {
  position: relative;
  list-style: none;
  margin:0;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
}

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

在列表元素中定位绝对值

3 个答案: