我正在对父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>
如何在不影响父容器溢出:隐藏
的情况下显示工具提示
只有当您将工具提示移到Overflow:Hidden;
父项之外时,才有可能这样做。 您可以创建一个包含ui_section
和tooltip_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>