我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
如果容器使用某些包含规则，则可以将元素相对于其容器定位为固定位置。
<div class='parent'>
<div class='child'></div>
</div>
.parent {
contain: content;
}
.child {
position: fixed;
top: 0;
left: 0;
}
其他回答
为了实现与请求的“相对于容器的固定位置”类似的目的，对我来说，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>
当您使用position:fixed CSS规则并尝试应用top/left/right/bottom时，它会相对于窗口定位元素。
解决方法是使用边距财产，而不是上/左/右/下
我的项目是.NET ASP Core 2 MVC Angular 4模板和Bootstrap 4。将“粘性顶部”添加到第一行的主应用程序组件html（即app.component.html）中，效果如下：
<div class='流动粘性顶部'><div class='col-sm-12'><导航菜单顶部></nav菜单顶部></div></div><div class=“row”><div class='col-sm-3'><nav menu></nav menu></div><div class='col-sm-9正文内容'><路由器出口></路由器出口></div></div>
这是惯例还是我把它简化了？
使用纯CSS，你无法做到这一点；至少我没有。然而，您可以非常简单地使用jQuery来实现。我会解释我的问题，稍加改动你就可以使用了。
因此，首先，我希望我的元素有一个固定的顶部（从窗口顶部），以及一个从父元素继承的左侧组件（因为父元素居中）。要设置左侧组件，只需将元素放到父元素中，并设置父元素的位置：relative。
然后，您需要知道当滚动条位于顶部（y为零滚动）时，元素距离顶部的距离是多少；还有两种选择。首先，它是静态的（一些数字），或者必须从父元素中读取它。
在我的例子中，它距离顶部静态图像150像素。所以，当你看到150时，它是当我们没有滚动时，元素从顶部开始的数量。
CSS
#parent-element{position:relative;}
#promo{position:absolute;}
jQuery
$(document).ready(function() { //This check window scroll bar location on start
wtop=parseInt($(window).scrollTop());
$("#promo").css('top',150+wtop+'px');
});
$(window).scroll(function () { //This is when the window is scrolling
wtop=parseInt($(window).scrollTop());
$("#promo").css('top',150+wtop+'px');
});
我不久前做过类似的事。我对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)
}
您需要设置宽度，然后它会获取窗口宽度并每隔几秒更改边距。我知道它很重，但它有效。
