css-position - 去除位置 : absolute inside of position:relative inside of overflow:auto 的滚动条

标签 css-position css

大家好,我的第一个问题是堆栈溢出。试图让一些非常简单的东西工作,我确信我错过了一些非常明显的东西。仍在习惯“标准”CSS,与非功能性 CSS 打交道太多年了!呵呵。

所以,我正在做的事的例子:

<div style="overflow: auto; border: 1px solid">
    hello
    <div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
        <div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
            <ul>
                <li >New</li>
                <li >Old</li>
            </ul>
        </div>
    </div>
</div>

本质上:第一个 div 是一个容器,我想在添加内容时自动溢出。在该容器内,我有一个弹出菜单,我在此处对其进行了简化。弹出菜单直接出现在“hello”下方(应该如此)。

但是,我的问题是,它并没有像绝对位置所期望的那样从父级“弹出”弹出菜单,而是实际上导致滚动条出现在父级上。

我知道如果我采用“position:relative”它会起作用,但它不再出现在我想要的位置(直接在前一个元素下)。

我在这里错过了什么?

编辑: 此处示例:http://marcos.metx.net/OverflowTest.htm

最佳答案

首先 - 内联样式是一个很大的禁忌。

最好包含一个样式表并通过“id”或“class”属性将其应用到各个 div。

请阅读符合标准的 css w3schools

问题是你的溢出属性。

auto - “如果溢出被截断,应该添加一个滚动条以查看其余内容”

你要找的是“溢出:可见;”

关于css-position - 去除位置 : absolute inside of position:relative inside of overflow:auto 的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1150295/

相关文章:

javascript - Html 默认选择选项 - 不同的颜色 - 不适用于当前的 Jquery

css - 如何使用 before 选择器 css 添加 li

jQuery 多个 css 值 - "float"问题

html - 将 CSS 放入正文并维护有效的 HTML5 代码?

layout - 在 Vaadin 10 Flow 中替换 Vaadin 8 框架中的 `AbsoluteLayout`?

html - 当我有其他现有的向左浮动的 div block 时,如何将向右浮动的 div block 放置在其父元素的顶部?

css - 将 Google Maps Container DIV 宽度和高度设置为 100%

html - 如何更改按钮 CSS 属性

javascript - $element.css ('top' ) 返回不同的值给 $element.position().top

html - 固定定位元素如何获取所有高度