CSS側邊欄與滾動條絕對工具提示

Question

我真的很努力用這個包裹我的頭，我有一個側邊欄，其中一個列表項是div這是一個名爲tooltip。我試圖弄清楚的是如何在不修剪工具提示的情況下上下滾動側邊欄？

這裏是一個jsFiddle without ScrollingjsFiddle with Scrolling

HTML

<div class="sidebar"> 
    <ul> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     <li> 
      <input type="text" placeholder="Blank"/> 
      <div class="tooltip"> 
       <input type="text" placeholder="Blank"/> 
      </div> 
     </li> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
     <li>list item</li> 
    </ul> 
</div> 

CSS

*{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html, body{ 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
ul, li{ 
    list-style:none; 
} 
.sidebar{ 
    position: fixed; 
    left:0; 
    top:0; 
    bottom:0; 
} 
ul{ 
    border-right: 1px solid #ccc; 
    margin: 0; 
    padding: 0; 
    width:300px; 
    height:100%; 
} 
li{ 
    padding:10px; 
    width: 100%; 
    border-bottom: 1px solid #ccc; 
    position: relative; 
    float: left; 
} 
.tooltip { 
    position: absolute; 
    background: #fff; 
    border: 1px solid #ccc; 
    top: 0; 
    right:-40px; 
} 

Answer 1

刪除position: relative從li

，並添加到您希望它偏移至容器..

更新小提琴http://jsfiddle.net/STDHQ/3/