是否有可能有一个嵌套元素来逃避溢出：隐藏其父容器？

Question

我有以下设置：

代码笔：https://codepen.io/pantaphobic-costar/pen/oNBrzqP

<div class="parent">
    Page Container
    <div class = "child1">
        header
        <div class = "grandchild">
            Content Div
            <div class = "greatgrandchild">
                Tooltip
            </div>
        </div>
    </div>
    <div class = "child2">
       Tabs
    </div>
</div>

我希望 Tooltip 元素在 child1 元素之外（并且在 child2 元素的一部分之上）可见，但 child1 元素需要保持其溢出：隐藏属性。这可能吗？

CSS

.parent{
  margin: 0;
  padding: 3px;
  border:solid 1px red;
}

.child1 {
  padding: 3px;
  border: 1px solid blue;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-height: 160px;
  flex-wrap: wrap;
  /*Cannot be removed*/
  overflow: hidden;
}

.child2 {
  border: 1px solid green;
  height: 39px;
  display: flex;
  align-items: center;
}

.grandchild{
  position: relative;
  width:200px;
  border:solid 1px green;
}

.greatgrandchild {
    position: absolute;
    top: 80%;
    left: 20px;
    background: white;
    border: 1px solid black;
    border-radius: 2px;
    display: flex;
    white-space: nowrap;
    padding: 5px;
    align-items: center;
    box-shadow: 2px 2px 6px #d8d8d8;
    font-size: 14px;
    z-index: 1;
}

Answer 1

目前工具提示是绝对定位的，但决定它应该放置在哪里的基础是它的直接父级，因为孙子的位置：相对。

这完全取决于您在定位方面想要做什么，但是如果您删除该 position: relative 并将 position: relative 放在树上更远的元素上，则工具提示将相对于该元素定位，因此'break摆脱了它自己的直接父级的隐藏设置。