提问者:小点点

显示溢出以外的div内容:隐藏


我正在对父div使用overflow:hidder。 里面我需要显示工具提示,有时工具提示里的内容比较大。 由于parrent的overflow属性,此额外内容被隐藏。 我的代码是这样的,

.ui_section {
  overflow: hidden
}
.ui_subsection {
   position: relative
}
.tooltip_section {
  position: absolute;
  z-index: 10;
  transform: translate(-50%, 20px);
}
<div class="ui_section">
  <div class="ui_subsection"></div>
  <div class="tooltip_section"></div>
</div>

如何在不影响父容器溢出:隐藏的情况下显示工具提示


共1个答案

匿名用户

只有当您将工具提示移到Overflow:Hidden;父项之外时,才有可能这样做。 您可以创建一个包含ui_sectiontooltip_section的高级父容器,并使它们成为彼此的兄弟姐妹,那么您的工具提示将能够显示在父容器之外,同时仍然获得正确的绝对位置。 示例:

null

.ui_section {
  overflow: hidden;
  width: 100px;
  height: 100px;
  background-color: tomato;
}
.ui_subsection {
   position: relative;
}
.tooltip_section {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transform: translate(20px, 20px);
  width: 200px;
  height: 50px;
  background-color: gold;
}
<div class="ui_section_container">
  <div class="ui_section">
    section
    <div class="ui_subsection">
      subsection
    </div>
  </div>
  <div class="tooltip_section">wide tooltip</div>
</div>