1

嘿伙计们，我的第一个问题是堆栈溢出。试图让一些非常简单的工作，我确信我错过了一些非常明显的东西。仍然习惯于“标准” 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”下方。

然而，我的问题是，不是弹出菜单从父级“出来”，正如绝对位置所预期的那样，它实际上导致滚动条出现在父级上。

我知道，如果我将 otu 设为“位置：相对”，它会起作用，但它不再出现在我想要的位置（直接在前一个元素下）。

我在这里想念什么？

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

4

2 回答 2

1

使用position: absolute而不是relative在那个中间 div 将解决您的问题。这给了你（在最里面的 div 上添加了边框颜色）：

替代文字 http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png

这是更新的源代码：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <div style="overflow: auto; border: 1px solid">
            hello
            <div style="position: absolute; z-index: 99999">
                <div style="z-index: 99999; overflow-y: hidden; position: absolute; 
                        overflow: hidden; height: 200px; left: 0; auto: 0;
                        border: 1px solid red">
                    <ul>
                        <li >New</li>
                        <li >Old</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

有关这方面的更多信息，请参阅具有溢出的框内的绝对定位框：自动或隐藏。

于 2010-02-11T18:45:19.363 回答
1

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

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

请在w3schools阅读符合标准的 css

问题是您的溢出属性。

auto - “如果溢出被剪裁，应添加滚动条以查看其余内容”

您正在寻找的是“溢出：可见；”

于 2010-01-28T15:56:28.200 回答