我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
检查此项：
<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>
其他回答
答案是肯定的，只要在将div位置设置为固定后不设置left:0或right:0。
http://jsfiddle.net/T2PL5/85/
签出侧边栏div.它是固定的，但与父级相关，而不是窗口视图点。
正文{背景：#ccc；}.包装器{边距：0自动；高度：1400px；宽度：650px；背景：绿色；}.侧边栏{背景色：#ddd；浮动：左侧；宽度：300px；高度：100px；位置：固定；}.主要{浮动：右侧；背景色：黄色；宽度：300px；高度：1400px；}<div class=“wrapper”>包装器<div class=“sidebar”>侧边栏</div><div class=“main”>main</div></div>
在这种情况下，可以根据父元素更改固定元素的位置。
可以使用以下代码获取父元素的位置。
function coordinatesSetter() {
var elm = $('parentElement');
var rect = elm.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return {top: rect.top + scrollTop, left: rect.left + scrollLeft});
}
我创建了这个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）
技巧是不要在元素（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（）函数，但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。
免责声明：
这正好回答了标题：固定位置，但相对于容器。对于实际的用例，用户需要定位：粘性是一种方法。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
它相对于视口建立的初始包含块进行定位，除非其祖先之一的变换、透视或过滤器属性设置为非空
您只需要向容器添加一个变换，固定元素的位置将相对于容器。我认为一个变换：translateX（0）；应该足够了。
