具有绝对位置溢出可滚动父项的 CSS 下拉列表

标签 css position css-position overflow absolute

我正在尝试创建网站的一个部分,其中在可滚动部分中有下拉菜单。可滚动部分在 Y 方向溢出,因为它将有未知数量的元素。每个元素都有自己的绝对定位的下拉列表。

理想情况下,在此演示(下面的链接)中,单击第 11 行或第 12 行我将能够让绝对定位的下拉列表不考虑父项的溢出(即它不会被切断)。这有可能实现吗?

https://ik9u2.csb.app/

编辑 原始代码和框链接:https://codesandbox.io/s/cranky-noether-ik9u2

最佳答案

将dropdown-item类改为固定位置,防止被滚动隐藏

然后将下拉菜单与按钮对齐,删除为下拉项类设置的 top 和 left 值,并将 span 的下拉类设置为 inline-block 以使下拉窗口显示在按钮下方 如果您想像现在一样将下拉窗口保留在按钮上方,请改用 inline-grid

关于具有绝对位置溢出可滚动父项的 CSS 下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59313243/

相关文章:

css - 相对于图像的绝对位置

css - 容器的绝对和相对定位

html - CSS + HTML 使用 z-index 划分分层出错

javascript - 将 div 移动到标题顶部

html - 如何使 <p> 不继承 <span> 不透明样式?

html - Chrome 中 <dl> 缺少 1 行像素

css - 溢出内部溢出隐藏和位置相对祖 parent

html - 复杂的定位元素(乘以行)

html - 如何旋转 td 中的文本并使其保持居中?

css - 将 div 固定在具有负边距的特定位置,然后在单击按钮时对其进行动画处理。