固定位置，但相对于容器
我正在尝试使用以下方法修复一个问题div，使其始终停留在屏幕顶部：
position: fixed;
top: 0px;
right: 0px;
但是，div位于内部居中容器中。当我使用position:fixed它时，它固定了div相对于浏览器窗口的相对位置，例如它靠在浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来相对于修复元素div，但是当您向下滚动页面时，该元素消失且不会像那样粘在顶部position:fixed。
是否有破解或解决方法来实现这一目标？
第1894篇《固定位置，但相对于容器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
我不久前做了类似的事情。我刚接触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)
}
您将需要设置宽度，然后它获取窗口宽度并每隔几秒钟更改边距。我知道它很重，但是可以用。
/* 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%);
}
我有同样的问题，我们的团队成员之一给了我一个解决方案。要允许div固定位置以及相对于其他div的位置，我们的解决方案是使用父容器包装固定div并滚动div。
<div class="container">
<div class="scroll"></div>
<div class="fix"></div>
</div>
的CSS
.container {
position: relative;
flex:1;
display:flex;
}
.fix {
prosition:absolute;
}
position: sticky这是一种与概念相似的定位元素的新方法position: fixed。不同之处在于，元素的position: sticky行为类似于position: relative其父元素，直到在视口中满足给定的偏移阈值为止。
在Chrome 56（目前为2016年12月测试版，2017年1月稳定）中：粘性现在又回来了。
https://developers.google.com/web/updates/2016/12/position-sticky
有关更多详细信息，请保持着陆！位置：WebKit中的粘性土地。
请参阅此jsFiddle示例。调整大小并查看固定元素如何与它们所在的浮动元素一起移动。使用最里面的滚动条查看滚动在站点上的工作方式（固定元素保持固定）。
由于这里的许多人所指出的，一个密钥不上设置任何位置设置fixed元素（无top，right，bottom，或left值）。
相反，我们将所有固定元素（请注意最后一个盒子中有四个）放在要放置它们的盒子中的第一位，如下所示：
<div class="reference">
<div class="fixed">Test</div>
Some other content in.
</div>
然后，我们使用margin-top和margin-left相对于它们的容器“移动”它们，就像这个CSS一样：
.fixed {
position: fixed;
margin-top: 200px; /* Push/pull it up/down */
margin-left: 200px; /* Push/pull it right/left */
}
请注意，由于fixed元素会忽略所有其他布局元素，因此小提琴中的最终容器可以具有多个fixed元素，并且仍然具有与左上角相关的所有那些元素。但这只有在它们都首先放置在容器中的情况下才是正确的，因为此比较小提琴表明，如果将它们分散在容器内容物中，则定位将变得不可靠。
2019解决方案：您可以使用position: sticky财产。
这是一个示例CODEPEN，演示了用法以及与的区别position: fixed。
其行为说明如下：
根据用户的滚动位置来定位具有粘性位置的元素。基本上，其作用类似于position: relative直到元素滚动到特定偏移量为止，在这种情况下它将变为位置：固定。向后滚动时，它将返回到其先前（相对）位置。
它会影响页面中其他元素的流动，即占据页面上的特定空间（就像position: relative）。
如果将其定义在某个容器内，则相对于该容器定位。如果容器有一些溢出（滚动），则取决于滚动偏移量，它会变为position：fixed。
因此，如果要在容器内实现固定功能，请使用粘性。
实现相对固定位置的另一种奇怪的解决方案是将容器转换为iframe，这样您的固定元素就可以固定在容器的视口而不是整个页面上。
我必须做一个广告，说我的客户想坐在内容区域之外。我只是简单地进行了以下操作，它就像一个魅力！
<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>
我同意Graeme Blackwood的答案是可以接受的答案，因为它实际上可以解决问题，但应注意，可以相对于其容器放置固定的元素。
我偶然发现申请时
-webkit-transform: translateZ(0);
相对于它，它相对于它是一个固定的子对象（而不是视口）。因此，我的固定元素left和top属性现在是相对于容器而言的。
因此，我进行了一些研究，发现该问题已被Eric Meyer所涵盖，即使感觉像是“绝招”，事实证明，这是规范的一部分：
对于其布局由CSS盒模型控制的元素，转换中除“ none”以外的任何值都将同时创建堆栈上下文和包含块。该对象充当固定位置后代的包含块。
http://www.w3.org/TR/css3-transforms/
因此，如果将任何转换应用于父元素，它将成为包含块。
问题在于实现似乎是错误的/创造性的，因为元素也停止表现为固定状态（即使该位似乎不属于规范的一部分）。
在Safari，Chrome和Firefox中会发现相同的行为，但在IE11中不会发现（固定元素仍将保持固定）。
另一个有趣的（未记录）的事情是，当固定元素包含在转换后的元素内时，尽管它的top和left属性现在将与容器相关联，同时尊重该box-sizing属性，但其滚动上下文将在元素的边界上延伸，就像框一样-sizing设置为border-box。对于那里的一些创意，这可能会成为一种玩物:)
答案是肯定的，只要您未设置left: 0或right: 0将div位置设置为fixed之后即可。
检出侧边栏div。它是固定的，但与父项有关，与窗口视点无关。
body { background: #ccc; }
.wrapper {
margin: 0 auto;
height: 1400px;
width: 650px;
background: green;
}
.sidebar {
background-color: #ddd;
float: left;
width: 300px;
height: 100px;
position: fixed;
}
.main {
float: right;
background-color: yellow;
width: 300px;
height: 1400px;
}
<div class="wrapper">wrapper
<div class="sidebar">sidebar</div>
<div class="main">main</div>
</div>
简短的回答：不。（现在可以使用CSS转换。请参见下面的编辑）
长答案：使用“固定”定位的问题是它会使元素脱离流动。因此无法相对于其父对象重新定位，因为好像它没有父对象。但是，如果容器的宽度是已知的固定宽度，则可以使用以下方法：
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
这是过时的信息。现在，借助CSS3转换的魔力，可以将动态大小的内容（水平和垂直）居中。遵循相同的原则，但是可以使用代替使用边距来偏移容器translateX(-50%)。这不适用于上面的边距技巧，因为除非宽度固定，否则您不知道要偏移多少，并且您不能使用相对值（例如50%），因为它将相对于父元素而不是相对于它的元素应用于。 transform表现不同。其值相对于它们所应用的元素。因此，50%for transform表示元素宽度的一半，而50%for margin表示父元素宽度的一半。这是IE9 +解决方案
使用与以上示例类似的代码，我使用完全动态的宽度和高度重新创建了相同的场景：
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
如果希望它居中，也可以这样做：
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
jsFiddle：仅水平居中
jsFiddle：水平和垂直居中
原始功劳归用户aaronk6指出，在此答案中
相似问题
问题类别
Check this: