html - 溢出隐藏的绝对div

Question

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

Here is fiddle

这是我的要求:

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

这是我遇到的问题:

1. 在为面板设置溢出属性时，绝对 div 被隐藏。
2. 并且在删除 overflow 属性后，面板不再滚动。

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/