固定位置但相对于容器

Question

我正在尝试修复 div 所以它总是粘在屏幕顶部，使用：

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

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

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

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

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

Answer 1

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

长答案：使用“固定”定位的问题在于它会使元素 失去流动。因此它不能相对于其父级重新定位，因为它就好像它没有一个。但是，如果容器具有固定的已知宽度，则可以使用以下内容：

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

http://jsfiddle.net/HFjU6/1/

编辑（03/2015）：

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

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

 .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%);
}

演示：

jsFiddle：仅水平居中

jsFiddle：水平和垂直居中

原始信用归用户 aaronk6 在 此答案 中向我指出

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

Answer 2

实际上这是可能的，并且接受的答案仅涉及集中化，这很简单。此外，您真的不需要使用 JavaScript。

这将使您处理任何情况：

如果您想在 position: absolute 容器内设置所有内容，然后使用 position: absolute 在 div 内创建一个新的固定位置 div，但 不要 设置其 top 和 left 属性。然后它将相对于容器固定在您想要的任何位置。

例如：

 /* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

 <div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

可悲的是，我希望这个线程可以解决我的问题，即 Android 的 WebKit 渲染框阴影模糊像素作为固定位置元素的边距，但它似乎是一个错误。

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