我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
/* html */
/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">
<div class="im-fixed-within-my-container-div-zone">
my fixed content
</div>
</div>
/* css */
/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body
{
float: right;
}
.im-fixed-within-my-container-div-zone
{
position: fixed;
transform: translate(-100%);
}
其他回答
免责声明：
这正好回答了标题：固定位置，但相对于容器。对于实际的用例，用户需要定位：粘性是一种方法。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
它相对于视口建立的初始包含块进行定位，除非其祖先之一的变换、透视或过滤器属性设置为非空
您只需要向容器添加一个变换，固定元素的位置将相对于容器。我认为一个变换：translateX（0）；应该足够了。
如果您使用JavaScript，这是可能的。在本例中，jQuery插件Sticky Kit：
我很晚才回答这个问题，但我相信这也是一个未来普遍存在的问题，肯定会对未来的搜索者有所帮助。
这可以通过使用技巧来解决。我们可以在这里使用calc。在计算范围内，我们可以使用100个垂直宽度，减去宽度的90%，然后除以2。请根据您的需要更改90%。在您的情况下，它可以是100%或70%，这取决于您的具体要求。
.your-class {
position: fixed;
right: calc((100vw - 90%)/2);
}
这对我有用。请注意，在我的例子中，我希望浮动元素向右移动。如果你想在左边，请用左边而不是右边。
实现相对固定位置的另一个奇怪的解决方案是将容器转换为iframe，这样固定元素可以固定到容器的视口而不是整个页面。
我不久前做过类似的事。我对JavaScript很陌生，所以我相信你可以做得更好，但这里有一个起点：
function fixxedtext() {
if (navigator.appName.indexOf("Microsoft") != -1) {
if (document.body.offsetWidth > 960) {
var width = document.body.offsetWidth - 960;
width = width / 2;
document.getElementById("side").style.marginRight = width + "px";
}
if (document.body.offsetWidth < 960) {
var width = 960 - document.body.offsetWidth;
document.getElementById("side").style.marginRight = "-" + width + "px";
}
}
else {
if (window.innerWidth > 960) {
var width = window.innerWidth - 960;
width = width / 2;
document.getElementById("side").style.marginRight = width + "px";
}
if (window.innerWidth < 960) {
var width = 960 - window.innerWidth;
document.getElementById("side").style.marginRight = "-" + width + "px";
}
}
window.setTimeout("fixxedtext()", 2500)
}
您需要设置宽度，然后它会获取窗口宽度并每隔几秒更改边距。我知道它很重，但它有效。
