Safari 中的固定位置答案

【问题标题】：Fixed position in SafariSafari 中的固定位置
【发布时间】：2021-01-05 16:09:40
【问题描述】：

子固定定位元素在 Safari 中不可见。

.parent {
  position: fixed;
  width: 70%;
  height: 60%;
  overflow: auto;
  background: red;
}

.child {
  position: fixed;
  top: 10%;
  right: 10%;
  background: blue;
}


<div class="parent">
  Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
  <div class="child">Close</div>
</div>

是否有任何 CSS 属性可以使其在 Safari 中可见？任何帮助将不胜感激。

【问题讨论】：

我在使用 safari 时遇到了类似的问题，但在滚动时，应该修复的项目像绝对位置一样跳跃，然后卡入到位。我通过使父或子位置相对来解决它。 Safari 似乎在嵌套 position:fixed 时遇到问题

标签： html css

【解决方案1】：

试试这个，如果有帮助，请告诉我。

将-webkit-transform: translateZ(0); 添加到您的脚本中，如下所示：

.child {
   position: fixed; 
   top: 10%; 
   right: 10%; 
   background: blue; 
   -webkit-transform: translateZ(0);
}

【讨论】：

【解决方案2】：

是的，将子位置改为absolute；

.child {
  position: absolute;
  top: 10%;
  right: 10%;
  background: blue;
}

您会注意到，在 Safari 中，该元素实际上是存在的，但您在 parent div 上设置了 overflow。由于子元素是fixed，因此溢出不适用于它，我相信另一个fixed 元素中的fixed 元素仍然会将它带出文档流并将其定位在DOM 上——但仍然尊重父元素元素宽度。

从您的父 div 中删除 overflow: auto，您将看到子 div。

这里有更多关于嵌套固定元素的阅读： CSS: position:fixed inside of position: fixed

编辑：如果孩子必须被修复，您可能需要考虑更改标记：

.parent {
  position: fixed;
  width: 100%;
  height: 60%;
}

.content {
  position: fixed;
  width: 70%;
  height: 60%;
  background: red;
  overflow: auto;
}

.child {
  position: fixed;
  top: 10%;
  right: 10%;
  background: blue;
}

<div class="parent">
  <div class="content">
    Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
  </div>
  <div class="child">Close</div>
</div>

【讨论】：

这不是一个选项。孩子和父母都必须固定。
@Dipak 如您所见，overflow 在 Safari 上导致了此问题。我添加了带有标记更改的更新版本。
谢谢！我有这个想法，但不幸的是我无法更改标记。
@Dipak 你有解决方案吗？

【解决方案3】：

如果你使用过，在你的父 div 中溢出：隐藏。去掉它。您的孩子将可见。对先生来说，它起作用了。

【讨论】：