ios - 仅在 iOs 上，嵌套的固定元素不能大于父元素

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

作为测试，我删除了所有对 z-index 的引用在我的CSS中，除了fixed-element .仍然没有在 iO 上工作(在其他所有事情上工作)

更多信息#2

看来问题是fixed-element在 iOS 上不能超出其父项的边界。在我看来group02上面是固定元素，但实际上，fixed-element如果这意味着变得比 group01 更大，就不能全屏显示.我仍在寻找解决此问题的方法。

Answer 1

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