顶部溢出的可滚动html <div>答案

【问题标题】：Scrollable html <div> that has overflow on top顶部溢出的可滚动html <div>
【发布时间】：2018-05-24 15:18:55
【问题描述】：

我有一个将溢出属性设置为滚动的 div。在这个 div 中，我有更小的 div，当有人将鼠标悬停在它们上方时会显示一个工具提示。我的问题是顶部 div 的工具提示被截断了，你看不到它们。有没有办法在顶部显示溢出，但让 div 保持可滚动？

【问题讨论】：

工具提示可以position:absolute吗？
是的，但它不会改变任何东西

【解决方案1】：

据我所知，除了某些元素之外，没有办法防止所有内容溢出。但是，如果您能够将工具提示定位在可滚动 div 之外，您可以尝试以下操作：

div.outer {
  overflow-y: scroll;
  height: 200px;
  width: 400px;
  border: 1px solid black;
  margin: 30px auto;
 }
 
 div.inner {
   width: 100%;
   height: 100px;
   background-color: lightgrey;
   margin-bottom: 15px;
 }
 
 .tooltip {
    visibility: hidden;
    position: absolute;
    top: 0px;
    width: 80px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
 }
 
 .inner:hover .tooltip {
    visibility: visible;
}

<div class="outer">
  <div class="inner">
    <span class="tooltip">Text 1</span>
  </div>
  <div class="inner">
    <span class="tooltip">Text 2</span>
  </div>
  <div class="inner">
    <span class="tooltip">Text 3</span>
  </div>
</div>

【讨论】：