时间戳

首页 > 解决方案 > Safari 中的固定位置

html - Safari 中的固定位置

问题描述

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

标签： htmlcss

解决方案

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

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

您会注意到，在 Safari 中，该元素实际上是存在的，但您已overflow在parentdiv 上进行了设置。而且由于子元素是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>

推荐阅读