固定的位置，但相对于容器
我正在尝试修复一个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%) 。 这不适用于上述保证金技巧，因为您不知道需要补偿多少，除非宽度是固定的，并且您不能使用相对值（如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>是的，根据规格，有一种方法。
虽然我同意格雷姆布莱克伍德应该被接受的答案，因为它实际上解决了这个问题，但应该指出的是，固定元素可以相对于其容器定位。
我意外地注意到，申请时
-webkit-transform: translateZ(0);
对身体来说，它相对于它而言是一个固定的孩子（而不是视口）。 所以，我的固定元素left和top现在相对于容器性质。
所以我做了一些研究，发现这个问题已经被Eric Meyer所覆盖，即使它感觉像是一个“窍门”，结果证明这是规范的一部分：
对于布局受CSS盒模型控制的元素，变换之外的任何值都不会导致创建堆栈上下文和包含块。 该对象充当固定位置后代的包含块。
http://www.w3.org/TR/css3-transforms/
所以，如果您对父元素应用任何转换，它将成为包含块。
但...
问题在于实现看起来有问题/创造性，因为元素也停止表现为固定的（即使这个位看起来不是规范的一部分）。
在Safari，Chrome和Firefox中可以找到相同的行为，但在IE11中（固定元素仍然保持固定）。
另一个有趣的（未记录的）事情是，当一个固定元素被包含在一个转换元素中时，当它的top和left属性现在将与容器相关时，考虑到box-sizing属性，它的滚动上下文将遍布元素，就像箱子大小设置为border-box 。 对于一些有创意的人来说，这可能会变成玩具:)
测试
链接地址: http://www.djcxy.com/p/64397.html