Html CSS列表样式：无和绝对定位的孙子

我有一个包含法语和英语值的项目列表，我想将这些值放在彼此的顶部，这样我可以淡出一种语言，而另一种语言淡入。如果我使用以下标记，那么事情的行为将与我预期的一样

试验
保险商实验室{
}
李{
位置：相对位置；
}
弗拉分区，英分区{
位置：绝对位置；
排名：0；
}


英语1
Fra 1


英语2
Fra 2


英语3
Fra 3

所以我不能100%确定这里发生了什么，但我认为这与当你绝对定位一个元素时，它会把它从布局中拉出来有关，因为li元素内部什么都没有留下，所以它们最终的高度是0px。它可能在列表样式设置为“无”之前工作，因为列表样式项目符号向列表元素添加了内容

解决这个问题的一种方法是只绝对定位一个div或在li上设置一个高度

div.frag{
   position: absolute;
   top: 0;
}

或

---

你应该使用

左边距：-40px输入

div.fra，div.eng{
位置：绝对位置；
排名：0；
}

而不是
位置：绝对。您还应该删除
，div.eng
您至少需要一个列表项不具有
绝对位置，以保持
li
，
ul
的高度并阻止其塌陷，因此只需将
div
中的一个设置为
绝对位置即可达到预期效果



试验
保险商实验室{
列表样式：无；
}
李{
位置：相对位置；
}
弗拉分区{
排名：0；
左：0；
位置：绝对位置；
}


英语1
Fra 1


英语2
Fra 2


英语3
Fra 3



li{
  height: 1em;
}