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