html - 溢出隐藏的绝对 div

Question

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

这是小提琴

以下是我的要求：

1. 修复了溢出内容的 div。
2. overflow-y 应该是自动滚动，但不是 overflow-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;

        }