如何在固定定位的div中显示绝对定位的div?

时间:2014-06-17 09:52:00

标签: html css

我有这个HTML:

 <div id="main">
        <div class="dummy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis enim molestias illo id voluptas tempora minima sunt fugiat voluptatibus voluptatem dolores omnis iste. Fuga facilis adipisci similique explicabo sunt alias! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam omnis esse saepe eveniet modi harum quae laborum eaque vero nesciunt consequuntur placeat nisi velit commodi minima itaque voluptatem necessitatibus quasi.</div>
        <div id="inner">I want this div to slide left on some action</div>
        <div class="dummy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis enim molestias illo id voluptas tempora minima sunt fugiat voluptatibus voluptatem dolores omnis iste. Fuga facilis adipisci similique explicabo sunt alias! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam omnis esse saepe eveniet modi harum quae laborum eaque vero nesciunt consequuntur placeat nisi velit commodi minima itaque voluptatem necessitatibus quasi.</div>
    </div>

请参阅this fiddle以查看包含相关CSS的完整代码。

我希望黑色内部div容器即使在主div容器外也可见,但也希望将overflow:auto提供给主div,以便内容如果内容在红色div增加时,应该会出现一个滚动条。这些东西没有合作。 请建议如何实现这一目标。

2 个答案:

答案 0 :(得分:4)

你的意思是this吗?

我添加了以下内容:

HTML:

<div id="preventOverflow">

CSS:

 #preventOverflow
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

无法合并两个单独块的滚动条,它们之间有一个div。我建议改变布局。

答案 1 :(得分:-1)

你是说这个......

 #inner {
   background: none repeat scroll 0 0 #000000;
   color: #FFFFFF;
   left: 59px;
   position: inherit;
   top: 5px;
   width: 80px;
}

http://jsfiddle.net/kisspa/xRasu/