在Safari中的固定位置 [英] Fixed position in Safari

问题描述

固定位置的子元素在Safari中不可见.

The child fixed positioned element is not visible in 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中可见?任何帮助将不胜感激.

Is there any CSS property that can make it visible in Safari? Any help will be highly appreciated.

推荐答案

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

Yes, change the child position to absolute;

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

您会注意到，在Safari中，元素实际上在那里，但是您在 parent div上设置了 overflow .并且由于子元素是 fixed 的，因此溢出不适用于它，并且我相信另一个 fixed 元素中的 fixed 元素仍然可以将其带出文档流并将其相对于DOM定位-但仍要遵守父元素的宽度.

You'll notice, in Safari, the element is actually there but you have overflow set on your parent div. And since the child element is fixed, overflow doesn't apply to it and I believe a fixed element within another fixed element still brings it out of document flow and positions it against the DOM - but still respects the parent element width.

从父div删除溢出:自动，您将看到子div.

Remove overflow: auto from your parent div and you'll see the child div.

有关嵌套固定元素的更多信息，请参见: CSS:位置:固定在位置内:固定

Here's some more reading on nested fixed elements: CSS: position:fixed inside of position: fixed

如果孩子需要得到修复，则可能需要考虑更改标记:

If the child has to be fixed, you might have to consider changing your markup:

.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>

这篇关于在Safari中的固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！