溢出隐藏绝对分区

Question

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

Here is fiddle

这里是我的要求：

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

这里是我遇到的问题：在把溢出属性面板中的绝对DIV是隐藏

1. 。
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; 

     }