html - オーバーフロー非表示の絶対div

Question

コンテナからオーバーフローした絶対divを表示したい。

ここにフィドルがあります

ここに私の要件があります：

1. コンテンツをオーバーフローする div を修正しました。
2. overflow-y は auto でスクロールする必要がありますが、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

これがお役に立てば幸いです。IDパネルには、絶対位置を入力します。

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

        }

Answer 2

<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/