CSS:绝对DIV在另一个绝对DIV中

时间:2011-06-23 08:17:29

标签: css css-position

我有以下内容:

<style type="text/css">
    div.container
    {
        width: 100px;
        height: 300px;
        border: solid 1px #CCCCCC;

        position: absolute;
        top: 20px; /* Will change depending on where the box is opened */
        left: 20px; /* Same */

        overflow: hidden;
    }

    div.block
    { /* Will exceed 300px in height */
        width: 100px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

[...]

<div class="container">
    <div class="block">
        <!-- hyperlinks -->
    </div>
</div>

我正在尝试创建一个模仿滚动的东西 - 一个在盒子里移动的盒子。 IE做得很漂亮; 'block'div完全隐藏在'容器'div中。每个其他浏览器都会在页面顶部,“容器”div上方放置“阻止”div并相对于页面进行定位。

如何让其他人像IE一样行事?

1 个答案:

答案 0 :(得分:1)

您的第一个div应具有固定的宽度和高度,CSS属性overflow: auto;。此div内的任何大于它的内容都会导致父div显示滚动条。

然后,您可以将其设置为positionabsolute,并将其放置在您喜欢的任何位置。

演示:http://jsfiddle.net/duc44/