Html 将跨距重叠设置为“重叠”；溢出“；

我的页面遇到问题。我正在使用左侧的图标菜单，当我将光标放在图标上时，它会显示一个

span

。我的列表有点长，如果窗口较小，我希望它显示一个滚动条：

overflow-y: auto; 
overflow-x: hidden; 

在

#导航菜单下

执行此操作时，

span

隐藏在右侧的滚动条下。如果删除溢出项，则

span

将被忽略，这就是我想要实现的目标。不幸的是，如果您删除

#导航菜单

下的

溢出

项，则该菜单是不可滚动的

为了更好地理解它，我编造了一把小提琴：

正文{
身高：100%；
左边距：150像素；
}
保险商实验室{
身高：100%；
宽度：3%；
保证金：0；
填充：0；
位置：固定；
}
导航栏{
列表样式类型：无；
填充：0px；
保证金：0；
顶部：0em；
左：0em；
最小宽度：2.5%；
z指数：10；
}
李纳瓦尔{
保证金：0.3em；
填充：0.3em；
}
ul.导航栏a{
文字装饰：无；
}
#导航菜单{
位置：固定；
宽度：65px；
溢出y：自动；
溢出x：隐藏；
}
#导航菜单{
列表样式：无；
高度：35px；
填充：2px；
宽度：20px；
}
#导航菜单范围{
宽度：0；
左：40px；
填充：0；
位置：绝对位置；
溢出：隐藏；
字体大小：125%；
字体大小：粗体；
字母间距：0.6px；
空白：nowrap；
线高：39px；
-webkit转换：0.25s；
-moz跃迁：0.25s；
过渡：0.25s；
盒影：0px 8px 16px 0px rgba（0,0,0,0.8）；
边界半径：5px；
-webkit边界半径：10px；
}
#导航菜单a{
高度：39px；
宽度：38px；
显示：块；
位置：相对位置；
}
#导航菜单a：悬停范围{
宽度：自动；
填充：0 20px；
显示：内联块；
}
#导航菜单a：悬停{
文字装饰：无；
-莫兹盒阴影：0 0 5px#9ddff5；
-webkit盒阴影：0 0 5px#9ddff5；
盒影：0 0 5px#9DDFF5；
}
/*绿色按钮*/
#导航菜单#测试类{
背景：url(https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png)不重复；
背景尺寸：包含；
}
#导航菜单#测试类：悬停{
背景：url(https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png)不重复；
背景尺寸：包含；
}
#导航菜单#测试类跨度{
背景色：#7da315；
颜色：#3d4f0c；
文本阴影：1px 1px 0#99bf31；
}

这是我的身体。

从

溢出中“取出”子元素的唯一方法是：将子元素的
位置设置为
固定
，这是父元素（它有一些
位置
而不是
静态
设置，以便溢出生效）：


这在大多数情况下都不起作用（更准确地说，在父项未固定的情况下，它可能会从其子项滚动“离开”），但在您的情况下，因为父项已固定，所以这可以解决您的问题。
为什么导航菜单的宽度是65px<代码>正文左侧的边距
是150px，只需向后推正文，否则它将位于我的菜单下方。With:65用于使滚动条不与我的图标重叠。谢谢你的回答，但不幸的是，我已经尝试过了。如果您将浏览器窗口缩小到菜单中有一个滚动条并向下滚动，请检查当您将光标放在图标上时它的作用：-/