我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
这很简单（根据下面的HTML）
技巧是不要在元素（div）上使用“position:fixed；”的top或left。如果未指定这些元素，则“fixed content”元素将显示为相对于封闭元素（具有“position:RELATIVE；”的div）INSTEAD OF相对于浏览器窗口！！！
<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
<div id="divCloser" style="position:relative; left: 852px;">
<div style="position:fixed; z-index:22;">
<a href="javascript:hideDiv('divTermsOfUse');">
<span style="font-size:18pt; font-weight:bold;">X</span>
</a>
</div>
</div>
<div> <!-- container for... -->
lots of Text To Be Scrolled vertically...
bhah! blah! blah!
</div>
</div>
上面的内容允许我在垂直滚动的div中的许多文本的顶部找到一个关闭的“X”按钮。“X”位于适当位置（不会随滚动文本移动，但当用户调整浏览器窗口的宽度时，它会随包围div容器向左或向右移动！因此，它垂直“固定”，但相对于包围元素水平定位！
在我开始工作之前，当我向下滚动文本内容时，“X”向上滚动并消失。
很抱歉没有提供我的javascript hideDiv（）函数，但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。
其他回答
是的，根据规格，有办法。
虽然我同意格雷姆·布莱克伍德的答案应该是公认的，因为它实际上解决了这个问题，但应该注意的是，固定元素可以相对于其容器定位。
我无意中注意到在申请时
-webkit-transform: translateZ(0);
相对于身体，它创建了一个固定的子对象（而不是视口）。所以我左边的固定元素和顶部的财产现在是相对于容器的。
所以我做了一些研究，发现这个问题已经被埃里克·迈耶（Eric Meyer）所涵盖，即使这感觉像是一个“把戏”，但事实证明这是规范的一部分：
对于布局由CSS框模型控制的元素，任何值如果转换结果为“无”，则会同时创建堆叠上下文和包含块。该对象充当包含用于固定定位子体的块。
http://www.w3.org/TR/css3-transforms/
因此，如果对父元素应用任何变换，它将成为包含块。
但是
问题是，实现似乎有问题/有创意，因为元素也停止了固定的行为（即使这一点似乎不是规范的一部分）。
同样的行为在Safari、Chrome和Firefox中都可以找到，但在IE11中没有（其中固定元素仍然保持固定）。
另一件有趣的（未记录的）事情是，当一个固定元素包含在一个转换的元素中时，虽然它的顶部和左侧财产现在将与容器相关，但考虑到方框大小属性，它的滚动上下文将扩展到元素的边界，就像方框大小设置为border-box一样。对于一些有创意的人来说，这可能会成为一件玩物：）
TEST
神奇的是将屏幕宽度减去容器宽度，然后除以2：
//1400px is according to container max-width (left can be also right)
.fixed {
position: fixed;
right: calc((100vw - 1400px)/2);
}
注意：css calc（）函数几乎不受支持，但不是100%受支持。对于大多数用例，它肯定得到了足够的支持。单击此处了解更多详细信息
代码段（有一个300px的容器，正好适合这个网站的小部件）：
.容器{最大宽度：300px；左边距：自动；右边距：自动；}.固定{位置：固定；右：计算（（100vw-300px）/2）；}@媒体屏幕和（最大宽度：300px）{右：0px；}<div style=“height:3000px”><div class=“container”><button class=“fixed”>固定含量</按钮>Lorem ipsum dolor坐在amet consectetur adipiscing elit。Laborum，eum？我要求最低限度，最低限度，最高限度，最低程度，最低限度-最低限度-最高限度！是否有责任追究责任？在过去的几年里，人们都在用鼻子和鼻子说话，用鼻子说话！在法庭的最高级别减去实验室的修改和体积后，法庭上的数字是相等的。加快我们的劳动时间，让我们一起努力，共同努力，共同奋斗，共同进步，共同进步！无论是什么样的物质解决方案，几乎没有人会在别名为auten pariator animi error的地方进行实验，也没有人会对实验结果进行验证！在dolorem ipsam eos porro magni出汗可能是主要的，它的脸。我们的过失是错误的，因为它排斥了可能的质量，asperiores earum ipsum interstias dicta sint fugit at que veniam dolorum illo？官方必须对所有人进行调查，调查结果表明，最大限度地减少自然灾害。所有人都坐着。</div></div>
我创建了这个jQuery插件来解决我遇到的类似问题，我有一个居中的容器（表格数据），我希望在滚动列表时将标题固定在页面顶部，但我希望它锚定在表格数据上，这样它就可以放在我放置容器的任何位置（居中、左、右），并允许它在水平滚动时随页面左右移动。
下面是这个jQuery插件的链接，它可以解决这个问题：
https://github.com/bigspotteddog/ScrollToFixed
该插件的描述如下：
该插件用于将元素固定到页面顶部，如果元素垂直滚动到视图之外；然而，它确实允许元素随着水平滚动继续向左或向右移动。
给定选项marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍将水平移动。一旦页面向下滚动到目标位置，元素将恢复到页面上的原始位置。
该插件已在Firefox 3/4、Google Chrome 10/11、Safari 5和Internet Explorer 8/9中进行了测试。
特定案例的用法：
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('#mydiv').scrollToFixed();
});
检查此项：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="width: 1000px !important;margin-left: auto;margin-right: auto">
<div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
</div>
<div id="1" style="width: 100%; height: 600px; background-color: #800000">
</div>
<div id="2" style="width: 100%; height: 600px; background-color: #100000">
</div>
<div id="3" style="width: 100%; height: 600px; background-color: #400000">
</div>
</body>
</html>
为了实现与请求的“相对于容器的固定位置”类似的目的，对我来说，position:fixed不起作用，因为当我滚动页面时，元素保持在固定位置，但您可以使用溢出功能实现类似的效果。
在下面的狙击中，检查标题在父容器中是如何固定的，但是当你滚动主体时，它也会滚动
#爷爷{宽度：100vw；高度：120vh；背景色：rgb（236、233、233）；溢出：隐藏；}#父母{宽度：200px；高度：200px；背景色：青色；溢出：隐藏；}#儿童1{填充：1em}#儿童2{高度：100px；背景色：卡其色；overflow-y：滚动；}<div id=“爷爷”><div id=“parent”><div id=“child1”>标题</div><div id=“child2”><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p></div></div></div>
