仅在 iO 上嵌套的固定元素不能大于父元素

Question

我的问题只发生在 iOs 上（在 Safari 和 Opera 上），在 Chrome、Firefox 甚至 Windows 和 Android 上的 Opera 上都能正常工作。

我有以下情况：

<div class="flex-box-parent">
    <div class="group01">
        <div class="fixed-element">
            This element has a position: fixed and z-index: 100
        </div>
    </div>
    <div class="group02">
        On iOS, fixed-element does not cover this part
    </div>
</div>

我需要将固定元素显示在我网站上的所有其他内容之上，因为它是具有全屏背景的模态元素。 很遗憾，fixed-element 的所有大于group01 的内容都没有显示出来。

group01 或 group02 均未指定 z-index。它在 Windows/Android 上运行良好，但在 iOS 上，group02 总是在上面。

CSS

.flex-box-parent{
    position: relative;
    display: flex;
    flex-direction: column;
}
.fixed-element{
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

.group01{
    position: relative;
    flex: 1;
    overflow: auto;
}

.group02{
  display: flex;
  flex-direction: column;
  position: relative;
}

更多信息 #1

作为测试，我删除了我的 css 中对 z-index 的所有引用，除了 fixed-element。仍然没有在 iOs 上工作（在其他所有事情上工作）

更多信息 #2

似乎问题在于fixed-element 在 iOS 上不能超出其父级的边界。 在我看来group02 高于固定元素，但实际上，fixed-element 根本无法全屏显示，如果这意味着大于group01。我仍在寻找解决此问题的方法。

Answer 1

在 html 中，您共享的 div 标记未针对类 .fixed-element 关闭。请修复并检查