是否可以让嵌套元素转义其父容器的 overflow:hidden ？

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 元素需要保持其 overflow:hidden 属性。这可能吗？

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

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

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

是否可以让嵌套元素转义其父容器的 overflow:hidden ？

Is it possible to have a nested element to escape overflow:hidden of its parent container?

html

css

css-position

overflow