溢出隐藏的绝对div

Question

我想显示从容器中溢出的绝对div。

Here is fiddle

以下是我的要求：

1. 固定div溢出内容。
2. overflow-y应该是自动滚动而不是溢出-y
3. 应显示绝对div。
4. 页面不应该滚动唯一固定位置div应滚动

以下是我遇到的问题：

1. 关于为面板设置溢出属性，绝对div正在隐藏。
2. 并且在删除溢出属性时，面板不会滚动。

CSS

                    #panel {
                position: fixed;
                top: 0px;
                right: 20%;
                bottom: 0px;
                background: snow;
            }
            .contact {
                background: skyblue;
                position: relative;
                height:50px;
            }
            .std {
                width: 80px;
            }
            .vtl {
                position: absolute;
                background: red;
                display: none;
                left:-153px;
                margin-top:-35px;
                width: 150px;
                height: 50px;
            }
            .vtl:after {
                content: ' ';
                height: 0;
                position: absolute;
                width: 0;
                border: 10px solid transparent;
                border-left-color: red;
                left: 100%;
                top: 10px;
            }
            .contact:hover .vtl {
                display: block;
            }

HTML

<div id="panel">
            <div class="contact">
                <div class="std">
                    Hover me!
                </div>
                <div class="vtl">
                    tools
                </div>
            </div>
            <div class="contact">
                <div class="std">
                    Hover me!
                </div>
                <div class="vtl">
                    tools
                </div>
            </div>
            <div class="contact">
                <div class="std">
                    Hover me!
                </div>
                <div class="vtl">
                    tools
                </div>
            </div>


                    ......

                </div>

Answer 1

由于<div class="std">包含在具有固定位置的<div id="panel">中，因此您需要扩展#panel的宽度才能显示<div class="std">中的内容。例如：

HTML

<div id="panel">
  <div class="contact">
    <div class="std">
     Hover me!
    </div>
    <div class="vtl">
     tools
    </div>
  </div>
</div>

CSS

#panel {
  position: fixed;
  top: 0px;
  right: 20%;
  bottom: 0px;
  background: snow;
  width:260px;
  overflow: auto;
}
.contact {
  background: skyblue;
  position: relative;
  height:50px;
}
.std {
  width: 80px;
  float:right;
}
.vtl {
  position: absolute;
  background: red;
  display: none;
  width: 150px;
  margin-left:10px;
  margin-top:-10px;   
  height: 50px;
}
.vtl:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-left-color: red;
  left: 100%;
  top: 10px;
}
.contact:hover .vtl {
  display: block;
}​

以下是一个有效的例子：http://jsfiddle.net/pZQrA/

Answer 2

我希望这会有所帮助。对于id面板，放置绝对位置。

#panel {
            position: absolute;
            top: 0px;
            right: 20%;
            bottom: 0px;
            background: snow;

        }