iOS14下sticky定位父元素内的fixed定位元素渲染异常问题求解

• 方案1：调整DOM结构，将日历弹窗移出position: sticky的父元素
  这是优先级最高的修复方案，你可以直接把弹窗挂载到<body>或者页面根节点下：React生态可使用createPortal实现，Vue生态可使用Teleport实现，原生JS可直接通过appendChild移动DOM节点。调整后弹窗的position: fixed会直接相对于视口定位，完全不受父元素sticky属性的影响，也不会丢失粘性栏的核心功能。
• 方案2：显式声明层叠上下文与定位属性
  若无法调整DOM结构，可依次添加以下属性测试修复：
  1. 给sticky父元素设置z-index: 1（可根据业务场景调整数值，只要是显式声明的非auto值即可），注意不要给该父元素添加transform、filter、opacity < 1等会改变fixed元素包含块的属性
  2. 给日历弹窗明确声明left、top数值，不要使用auto定位，同时显式设置z-index属性，数值高于sticky父元素的z-index
  3. 确认sticky父元素的overflow属性为visible，不要设置overflow: hidden或overflow: auto
• 方案3：强制创建独立层叠上下文
  若上述方案均无效，可给sticky父元素添加isolation: isolate属性，强制创建独立的层叠上下文，规避iOS14内核异常的层叠计算逻辑对内部fixed元素渲染的影响。

该问题属于iOS14版本Safari内核的已知渲染bug，iOS15及以上版本已经官方修复，上述所有方案都不需要废弃position: sticky属性，也不需要额外引入JS模拟粘性定位逻辑。

内容的提问来源于stack exchange，提问作者ThaoD5