我正在尝试修复一个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>
其他回答
为了实现与请求的“相对于容器的固定位置”类似的目的，对我来说，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>
我不得不用我的客户想坐在内容区之外的广告来做这件事。我只是简单地做了下面的事情，它就像一个魅力！
<div id="content" style="position:relative; width:750px; margin:0 auto;">
<div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
<a href="#" style="position:fixed;"><img src="###" /></a>
</div>
</div>
我创建了一个jsfiddle来演示这是如何使用转换的。
HTML
<div class="left">
Content
</div>
<div class="right">
<div class="fixedContainer">
X
</div>
Side bar
</div>
CSS
body {
margin: 0;
}
.left {
width: 77%;
background: teal;
height: 2000px;
}
.right {
width: 23%;
background: yellow;
height: 100vh;
position: fixed;
right: 0;
top: 0;
}
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
//right: 0;
top: 0%;
transform: translateX(-100px);
}
jQuery
$('.fixedContainer').on('click', function() {
$('.right').animate({'width': '0px'});
$('.left').animate({'width': '100%'});
});
https://jsfiddle.net/bx6ktwnn/1/
在这种情况下，可以根据父元素更改固定元素的位置。
可以使用以下代码获取父元素的位置。
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});
}
免责声明：
这正好回答了标题：固定位置，但相对于容器。对于实际的用例，用户需要定位：粘性是一种方法。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
它相对于视口建立的初始包含块进行定位，除非其祖先之一的变换、透视或过滤器属性设置为非空
您只需要向容器添加一个变换，固定元素的位置将相对于容器。我认为一个变换：translateX（0）；应该足够了。
