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>

然而，这只是修复了父容器左上角的元素，而不是窗口。

我目前的款式可以吗？

Answer 1

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

此方法基本上定位容器元素以使用top: 0 / right: 0 / bottom: 0 / left: 0填充窗口元素的高度/宽度，然后将其垂直居中/横向使用margin: auto。

Example Here

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

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

如果您使用translate属性，则其子div将仅相对于父div放置，即使它是position:fixed，因此您可以使用上面的代码将#container置于中心位置你的红色div将相对于窗口放置而不是父div：）

Answer 3

简单，将这个添加到孩子：

position: sticky;

将固定元素定位在相对于页面的固定元素内

3 个答案: