我可以定位相对于父元素固定的元素吗？

Question

我发现当我将元素定位固定时，无论父元素是否相对定位，它都会相对于窗口定位固定？

 #wrapper {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}

 <div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

原文由 Jiew Meng 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

让我为这两个可能的问题提供答案。请注意，您现有的标题（和原始帖子）提出的问题不同于您在编辑和后续评论中寻求的问题。

---

要相对于父元素定位元素“固定” ，您需要在子元素上使用 position:absolute ，以及在父元素上使用除默认或静态以外的任何位置模式。

例如：

 #parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

这将定位 childDiv 元素相对于 parentDiv 的位置向左 50 像素和向下 20 像素。

---

To position an element “fixed” relative to the window , you want position:fixed , and can use top: , left: , right: , and bottom: 您认为合适的位置。

例如：

 #yourDiv { position:fixed; bottom:40px; right:40px; }

这将定位 yourDiv 相对于 Web 浏览器窗口固定，距底部边缘 40 像素，距右边缘 40 像素。

原文由 DuckMaestro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

CSS 规范要求 position:fixed 锚定到视口，而不是包含定位的元素。

如果必须指定相对于父元素的坐标，则必须先使用 JavaScript 找到父元素相对于视口的位置，然后相应地设置子（固定）元素的位置。

备选 方案：某些浏览器具有 sticky CSS 支持，它限制元素定位在其容器和视口中。根据提交消息：

sticky … 将元素限制在其容器框和视口的交集内。

粘性定位元素的行为类似于 position:relative（为其流入保留空间），但具有由粘性位置确定的偏移量。更改了 isInFlowPositioned() 以覆盖相对和粘性。

根据您的设计目标，此行为在某些情况下可能会有所帮助。它目前是一个工作草案，除了表格元素外，还得到了不错的支持。 position: sticky 在 Safari 中仍然需要一个 -webkit 前缀。

有关浏览器支持的最新统计信息，请参阅 caniuse 。

原文由 Jon Adams 发布，翻译遵循 CC BY-SA 3.0 许可协议