我正在尝试根据视口定位一些列表的元素,但它们最终会坚持他们的父母.
要重现这个问题,我只需要创建一个绝对定位元素的列表：
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;
}*这有一些例外,例如对祖先的转换会破坏这种行为.
