固定位置，但相对于容器

我正在尝试修复div以便始终使用以下方法将其固定在屏幕顶部：

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

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

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

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

答案

简短的回答：不。（现在可以使用 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%)而不是使用 margin 来偏移容器。这不适用于上面的边距技巧，因为除非宽度固定，否则您不知道要偏移多少，并且您不能使用相对值（例如50% ），因为它将相对于父对象而不是相对于父对象。应用于的元素。 transform行为有所不同。其值是相对于它们所应用的元素的。因此， transform 50%表示元素宽度的一半，而50%则是父元素宽度的一半。这是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 指出，在此答案中向我指出了这一点

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

这将使您处理任何情况：

设置好一切，你会如果你要的位置：位置内绝对的：相对的容器，然后创建一个 DIV 中一个新的固定位置 DIV position: absolute ，但是没有设置它的顶部和左属性。然后，它将相对于容器固定在您想要的任何位置。

例如：

/* 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 的答案是可以接受的答案，因为它实际上可以解决问题，但应注意，可以相对于其容器放置固定的元素。

我偶然发现申请时

-webkit-transform: translateZ(0);

相对于它，它相对于它是一个固定的子代（而不是视口）。因此，我的固定元素left和top属性现在相对于容器。

因此，我进行了一些研究，发现该问题已经被Eric Meyer所涵盖，即使感觉像是 “绝招”，事实证明，这是规范的一部分：

对于其布局由 CSS 盒模型控制的元素，转换中任何值（无值）都会导致创建堆栈上下文和包含块。该对象充当固定位置后代的包含块。

http://www.w3.org/TR/css3-transforms/

因此，如果将任何转换应用于父元素，它将成为包含块。

但...

问题在于实现似乎是错误的 / 创造性的，因为元素也停止表现为固定状态（即使该位似乎不属于规范的一部分）。

在 Safari，Chrome 和 Firefox 中会发现相同的行为，但在 IE11 中不会发现（固定元素仍将保持固定状态）。

另一个有趣的（未记录）的事情是，当固定元素包含在转换后的元素内时，尽管它的top和left属性现在将与容器相关联，并且尊重box-sizing属性，但其滚动上下文将延伸到元素，就像将 box-sizing 设置为border-box 。对于那里的一些创意，这可能会成为一种玩物:)

测试