html – 在列表元素中定位绝对值

发布时间：2020-12-14 22:40:06 所属栏目：资源来源：网络整理

导读：我正在尝试根据视口定位一些列表的元素,但它们最终会坚持他们的父母. 要重现这个问题,我只需要创建一个绝对定位元素的列表： body { background-color: lightgray;}ul { position: absolute; top: 50px; left: 50px; list-style: none;}.element { position:

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

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

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元素的静态位置吗？


最佳答案
尝试使用position：fixed代替. position：absolute将相对于最近的定位祖先绝对定位一个元素(在这种情况下,你的ul与position：absolute),而position：fixed将相对于viewport *定位一个元素.
代码段：

body {
  background-color: lightgray;
}

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

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

*这有一些例外,例如对祖先的转换会破坏这种行为.

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!