Question

我有一个div，其overflow属性设置为scroll。在这个div中我有较小的div，当有人在它们上面盘旋时显示工具提示。我的问题是顶部div的工具提示被切断了，你看不到它们。有没有办法在顶部显示溢出，但div是否可以滚动？

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

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

1 个答案: