如何弹出嵌套子组件外的祖先有溢出隐藏

Question

我有一个滑动转盘，其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/

Answer 1

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

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