Html 绝对位置在列表元素中

我试图根据视口定位一些列表的元素，但它们最终会坚持它们的父元素

为了重现这个问题，我只需要创建一个列表，其中包含一个绝对定位的元素：

正文{
背景颜色：浅灰色；
}
保险商实验室{
位置：绝对位置；
顶部：50px；
左：50px；
列表样式：无；
}
.元素{
位置：绝对位置；
排名：0；
左：0；
背景色：红色；
}

元素

如果要使元素的位置相对于视口，则父（

ul

）不应具有

位置：绝对
，因此：

方法1）移除
位置：绝对
ul
：


正文{
背景颜色：浅灰色；
}
保险商实验室{
顶部：50px；
左：50px；
列表样式：无；
}
.元素{
位置：绝对位置；
排名：0；
左：0；
背景色：红色；
}



元素


请试试这个。移除
ul
类中的
位置：绝对
，并给出
位置：相对
。和
body
和
ul
元素都设置了默认边距。所以把它拿走


正文{
背景颜色：浅灰色；
保证金：0；
}
保险商实验室{
位置：相对位置；
列表样式：无；
保证金：0；
}
.元素{
位置：绝对位置；
排名：0；
左：0；
背景色：红色；
}



元素


尝试改用
位置：固定
position:absolute
将相对最近的祖先定位元素（在本例中，您的
ul
使用
position:absolute
），而
position:fixed
将相对视口定位元素*

代码段：


正文{
背景颜色：浅灰色；
}
保险商实验室{
位置：绝对位置；
顶部：50px；
左：50px；
列表样式：无；
}
.元素{
位置：固定；
排名：0；
左：0；
背景色：红色；
}



元素


绝对是相对于定位的元素…将
位置：相对添加到
li
…它只使元素的位置相对于li，而不是相对于视口。尝试此操作并查看。元素的行为{position:absolute；top:-40；left:200；背景色：红色；}除非我加上“px”和“end”，否则顶部和左侧的样式不会自动应用，而且位置仍然不正确。由于给定的解决方案有效，我对您的回答投了赞成票。不幸的是，由于其他限制，我无法从
ul
中删除
位置：absolute
，也无法更改HTML。仅供参考：@Jesse de Bruijne的解决方案就是我一直在寻找的解决方案，使用固定位置而不是绝对位置。@ThomasFerro，谢谢你的支持。但是如果你为元素设置
position:fixed
，它是固定的，在滚动页面时不会移动。
body{height:2200px；}
和滚动页面并查看结果。这种行为在这种特定情况下非常适合我，因为我的应用程序的主体宽度和高度设置为100%，每个组件管理自己的溢出。