固定位置，但相对于容器

小编典典

固定位置，但相对于容器

css

我正在尝试使用以下方法修复一个问题div，使其始终停留在屏幕顶部：

position: fixed;
top: 0px;
right: 0px;

但是，该div容器位于居中的容器中。当我使用position:fixed它时，它固定了div相对于浏览器窗口的相对位置，例如它靠在浏览器的右侧。相反，它应该相对于容器固定。

我知道position:absolute可以用来相对于修复元素div，但是当您向下滚动页面时，该元素消失并且不会像那样粘在顶部position:fixed。

是否有破解或解决方法来实现这一目标？

阅读 248

2020-05-16

共1个答案

小编典典

简短的回答：不。（现在可以使用CSS转换。请参见下面的编辑）

长答案：使用“固定”定位的问题是它会使元素 脱离流动
。因此无法相对于其父对象重新定位，因为好像它没有父对象。但是，如果容器的宽度是已知的固定宽度，则可以使用以下方法：

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

编辑（03/2015）：

这是过时的信息。现在，借助CSS3转换的魔力，可以将动态大小的内容（水平和垂直）居中。遵循相同的原则，但是可以使用代替使用边距来偏移容器translateX(-50%)。这不适用于上面的边距技巧，因为除非宽度固定，否则您不知道要偏移多少，并且您不能使用相对值（如50%），因为它将相对于父元素而不是相对于它的元素应用于。
transform表现不同。其值相对于它们所应用的元素。因此，50%for transform表示元素宽度的一半，而50%for
margin表示父元素宽度的一半。

使用与以上示例类似的代码，我使用完全动态的宽度和高度重新创建了相同的场景：

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

如果希望它居中，也可以这样做：

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

2020-05-16