溢出隱藏絕對分區

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; 

     }