CSS:另一个绝对DIV内的绝对DIV

Question

我有以下内容:

<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 中。所有其他浏览器都会在页面顶部抛出“ block ”div，在“容器”div 上方并相对于页面定位。

我如何让其他所有人都像 IE 那样行事？

Answer 1

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

然后您可以随意将其设置为 position 到 absolute，并将其放置在您喜欢的任何位置。

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