Question

固定位置的子元素在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中可见？任何帮助将不胜感激。

Answer 1

尝试一下，让我知道是否有帮助。

像这样在脚本中添加-webkit-transform: translateZ(0);：

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

Answer 2

是的，将子位置更改为absolute；

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

您会注意到，在Safari中，元素实际上在那里，但是您在overflow div上设置了parent。而且由于子元素是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>

Answer 3

在你的父 div 中，如果你使用过，overflow: hidden。去掉它。您的孩子将是可见的。对于先生来说，它起作用了。

在Safari中的固定位置

3 个答案: