如何弹出隐藏溢出的祖先之外的嵌套子组件？答案

【问题标题】：How to pop out nested child component outside of ancestor that has overflow hidden?如何弹出隐藏溢出的祖先之外的嵌套子组件？
【发布时间】：2021-08-01 22:35:24
【问题描述】：

我有一个滑动轮播，其 overflow-x 属性设置为隐藏，其中包含多个项目，一次显示 4 个。在项目中，有一个按钮可触发绝对定位的弹出菜单，该菜单比轮播容器长，并且相对于其父项目。当菜单可见时，它的整个高度被截断并变为可滚动的。

我想要的是让弹出菜单完全可见，而不会被轮播溢出切断。这可能吗？

理想情况下，我想在求助于 JS 之前先找到一个 CSS 解决方案。我在网上能找到的唯一信息是仅与父元素和直接子元素相关的示例，不考虑嵌套子元素，因此我们将不胜感激。

<div class='carousel'> //has overflow-x hidden
  <div class='item'> //multiple item elements
    <div class='wrapper'> //relative positioned wrapper
      <div class='pop-out'> //absolutely positioned pop out
        <div class='pop-out-list'> //list that contains multiple items which are cut off
          <div class='pop-out-item'>
          ...
        </div>
      </div>
    </div>
  </div>
  ...
</div>

这是一个更好地演示这个问题的小提琴 https://jsfiddle.net/84p9gkru/

【问题讨论】：

标签： javascript html css reactjs sass

【解决方案1】：

只需在pop-out-list 中使用高于carousel 的z-index 属性即可

.pop-out-list{
z-index:99999;
}

【讨论】：

感谢您的回复，我试过了，但是没有用。我附上了一个更好地突出问题的小提琴。