摆脱位置的滚动条:绝对位置内:相对溢出内部:auto

时间:2009-07-19 16:47:39

标签: 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”下。

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

我知道如果我把otu称为“位置:亲戚”它可以工作,但它不再适用于我想要的地方(直接在前一个元素下)。

我在这里缺少什么?

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

2 个答案:

答案 0 :(得分:1)

首先 - 内联样式是一个很大的不行。

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

请阅读w3schools

符合标准的css

问题是你的溢出属性。

自动 - “如果剪辑溢出,则应添加滚动条以查看其余内容”

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

答案 1 :(得分:1)

在中间div上使用position: absolute代替relative可以解决您的问题。这给你(在最里面的div上增加了边框颜色):

alt text 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>

有关详情,请参阅Absolutely positioned box inside a box with overflow: auto or hidden