在页面中将固定元素相对于固定元素进行定位

Question

我有一个固定容器，垂直和水平居中于页面上，并且在该容器内有一个元素。理想情况下，我希望将此元素定位在窗口的左上角，但我无法使其正常工作。

这个JS Bin演示了这个问题。

https://jsbin.com/nodonatifo/edit?html,css,output

起初我以为我只需要在元素上做类似这样的事情。

#container {
  width: 300px;
  height: 400px;
  background-color: #55ffdd;
  /* Center on page */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#element-actual {
  background-color: red;
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0px;
  left: 0px;
}

<div id="container">
  <div id="element-actual"></div>
</div>

然而，这只是将元素固定在父容器的左上角，而不是窗口中。我的当前样式是否可以实现这一点？

- joshfarrant

---

寻求代码帮助的问题必须在问题本身中包含最短的代码以便复现。虽然您已经提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他SO用户将毫无价值。 - Paulie_D

如果您正在使用position:fixed，那么为什么它需要成为子元素？ - Paulie_D

它实际上是 Ember 应用程序中的一个模态组件，因此必须在放置该组件的任何位置正常工作。 - joshfarrant

Answer 1

#container {
  width: 300px;
  height: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #55ffdd;
  margin-top: -200px;
  margin-left: -150px;
}

如果您使用translate属性，则其中的子

元素只会相对于父

元素进行定位，即使该元素使用了position:fixed，因此您可以使用上面的代码将#container置于中心位置，而您的红色

将相对于窗口而不是父

进行定位 :)

- Gaurav Aggarwal

---

谢谢，太好了，这确实解决了问题。如果容器高度未知，是否可以实现相同的垂直居中对齐，而不破坏固定元素的定位？ - joshfarrant

不行，因为这只能通过之前的代码“translate”来实现，而这并不适用于此情况，所以高度应该在此方法中已知。 - Gaurav Aggarwal

Answer 2

如Gaurav Aggarwal已经指出，固定元素仍将相对于父元素的变换定位。如果您希望容器元素动态定位（即使它具有未知的尺寸），那么您可以使用以下方法，并避免在垂直/水平居中时使用transform: translate(-50%, -50%)。

该方法本质上将容器元素定位为填充窗口元素的高度/宽度，使用top: 0/right: 0/bottom: 0/left: 0，然后使用margin: auto在垂直/水平方向上居中。 示例在此

#container {
    width: 300px;
    height: 400px;
    position: fixed;
    top: 0; right: 0;
    bottom: 0; left: 0;
    margin: auto;
    background-color: #55ffdd;
}
#element-actual {
    background-color: red;
    width: 100px;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
}

<div id="container">
    <div id="element-actual"></div>
</div>

- Josh Crozier

---

但这将使#container根据窗口的高度显示完整。 - Gaurav Aggarwal

@GauravAggarwal 你确定吗？在我提供的例子中似乎没有发生这种情况。 - Josh Crozier

是的，我确定，因为在你提供的例子中，height 仍然是已知的。尝试移除 height 属性，你就会看到问题了。 - Gaurav Aggarwal

这正是我需要的，谢谢 Josh。top:0 和 margin:auto 的小技巧很不错。 - joshfarrant

Answer 3

很简单，将这个添加到子元素中：

position: sticky;

- Rasmus