我正在尝试修复div，使其始终停留在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
但是，div 位于居中的容器内。当我使用position:fixed 时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute 可用于修复相对于div 的元素，但是当您向下滚动页面时，该元素会消失并且不会像position:fixed 那样粘在顶部。
是否有实现此目的的 hack 或解决方法？
【问题讨论】：
标签： css position css-position fixed
简短回答：否。（现在可以使用 CSS 转换。请参阅下面的编辑）
长答案：使用“固定”定位的问题在于它会使元素失去流动。因此它不能相对于其父级重新定位，因为它就好像它没有一个。但是，如果容器具有固定的已知宽度，您可以使用如下内容：
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
这是过时的信息。现在可以借助 CSS3 变换的魔力将动态大小的内容（水平和垂直）居中。同样的原则也适用，但你可以使用translateX(-50%)，而不是使用边距来抵消你的容器。这不适用于上述边距技巧，因为您不知道要偏移多少，除非宽度是固定的并且您不能使用相对值（例如50%），因为它将相对于父级而不是它应用到的元素。 transform 行为不同。它的值是相对于它们所应用的元素的。因此，50% 代表 transform 表示元素宽度的一半，而 50% 代表边距是父元素宽度的一半。这是IE9+ solution
使用与上述示例类似的代码，我使用完全动态的宽度和高度重新创建了相同的场景：
.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: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
原始信用归用户 aaronk6 提供，因为在 this answer 中向我指出了这一点
【讨论】：
position:fixed 不指定 top 或 left 有时 有效吗？如果元素具有正常定位，则某些浏览器似乎将元素默认为正常位置。 stackoverflow.com/questions/8712047/…
left:inherit添加到固定位置元素可以强制浏览器尊重父级的偏移量。
实际上这是可能的，并且公认的答案仅涉及集中化，这很简单。而且你真的不需要使用 JavaScript。
设置一切，如果你想定位：绝对在一个位置：相对容器内，然后使用position: absolute在div内创建一个新的固定位置div，但不设置它的顶部和左侧属性。然后它将相对于容器固定在您想要的任何位置。
例如：
/* Main site body */
.wrapper {
width: 940px;
margin: 0 auto;
position: relative; /* Ensure absolute positioned child elements are relative to this*/
}
/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
width: 220px;
position: absolute;
top: 0;
left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}
/* The element you want to fix the position of */
.fixed {
width: 220px;
position: fixed;
/* Do not set top / left! */
}<div class="wrapper">
<div class="fixed-wrapper">
<div class="fixed">
Content in here will be fixed position, but 240px to the left of the site body.
</div>
</div>
</div>遗憾的是，我希望这个帖子可以解决我的问题，即 Android 的 WebKit 将框阴影模糊像素渲染为固定位置元素的边距，但这似乎是一个错误。
无论如何，我希望这会有所帮助！
【讨论】：
<div> 和position:absolute 包裹在<div> 中，而用position:fixed 代替，并且效果非常好，即使在调整窗口大小等时，至少在铬和 IE。所以它是： 虽然我同意 Graeme Blackwood's 应该是公认的答案，因为它实际上解决了问题，但应该注意的是，固定元素可以相对于其容器定位。 em>
申请的时候偶然发现
-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 属性，它的滚动上下文将延伸到元素的边框上，就好像 box-sizing 设置为 border-box。对于一些有创意的人来说，这可能会成为一个玩物:)
【讨论】：
left:（考虑到搞砸了）
答案是肯定的，只要你设置div位置为fixed后不设置left: 0或right: 0即可。
查看侧边栏 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>【讨论】：
position: sticky 这是一种定位元素的新方法，在概念上类似于position: fixed。不同之处在于具有position: sticky 的元素在其父元素中的行为类似于position: relative，直到在视口中满足给定的偏移阈值。
在 Chrome 56 中（目前为 2016 年 12 月的测试版，2017 年 1 月稳定）位置：粘性现在又回来了。
https://developers.google.com/web/updates/2016/12/position-sticky
更多详情请见Stick your landings! position: sticky lands in WebKit。
【讨论】：
position:sticky 很棒。 IE以外的所有浏览器都支持caniuse.com/#feat=css-sticky
sticky 更好，因为它还允许设置width: 100%，相对于包含div，这是以前的解决方案（fixed 没有left 或right）不允许。
2019 年解决方案：您可以使用position: sticky 属性。
这是一个示例CODEPEN，展示了用法以及它与position: fixed 的区别。
它的行为解释如下：
根据用户的滚动位置定位具有粘性位置的元素。它基本上就像position: relative 一样，直到一个元素滚动到一个特定的偏移量之外，在这种情况下它变成了位置：固定。当它向后滚动时，它会回到之前的（相对）位置。
它影响页面中其他元素的流动，即占据页面上的特定空间（就像position: relative）。
如果它是在某个容器内定义的，它会相对于该容器定位。如果容器有一些溢出（滚动），根据滚动偏移量它变成位置：固定。
因此，如果您想在容器内实现固定功能，请使用粘性。
【讨论】：
position: sticky。帮了大忙，谢谢！
overflow: hidden 属性，position: sticky 将不起作用。
只需将顶部和左侧样式从固定位置 div 中取出。这是一个例子
<div id='body' style='height:200%; position: absolute; width: 100%; '>
<div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
<div id='content' style='position: fixed;'>content</div>
</div>
</div>
#content div 将位于父 div 所在的任何位置，但会固定在那里。
【讨论】：
我创建了这个 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();
});
【讨论】：
我必须通过我的客户想要坐在内容区域之外的广告来做到这一点。我只是做了以下事情，它就像一个魅力！
<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>
【讨论】：
如果容器使用某些containment 规则，则可以相对于其容器定位具有固定位置的元素。
<div class='parent'>
<div class='child'></div>
</div>
.parent {
contain: content;
}
.child {
position: fixed;
top: 0;
left: 0;
}
【讨论】：
See this jsFiddle example. 调整大小并查看固定元素如何与它们所在的浮动元素一起移动。使用最里面的滚动条查看滚动在网站上的工作方式（固定元素保持固定）。
正如这里的许多人所说，一个键没有在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 元素忽略了所有其他布局元素，最终容器in our fiddle 可以有多个fixed 元素，并且仍然具有与左上角相关的所有这些元素。但这只有在它们都放在容器的第一个位置时才成立，as this comparison fiddle shows that if dispersed within the container content, positioning becomes unreliable。
【讨论】：
如果将position: fixed; 更改为position: sticky;，您就有了解决方案
所以你的代码应该是：
position: sticky;
top: 0;
right: 0;
现在其他 div 不会滑到下面。
【讨论】：
免责声明：
这只是标题的答案：固定位置但相对于容器。
对于用户要求的实际用例position: sticky 是要走的路。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
它是相对于视口建立的初始包含块定位的，除非它的祖先之一的变换、透视或过滤器属性设置为非无
您只需向容器添加一个变换，固定元素的位置将相对于容器。我认为transform: translateX(0); 就足够了。
【讨论】：
【讨论】：
使用纯 CSS 是无法做到的；至少我没有。但是，您可以非常简单地使用 jQuery 来完成。我会解释我的问题，稍加改动就可以使用它。
首先，我希望我的元素有一个固定的顶部（从窗口顶部），以及一个从父元素继承的左侧组件（因为父元素居中）。要设置左侧组件，只需将您的元素放入父元素并为父元素设置position:relative。
然后你需要知道当滚动条在顶部时你的元素距离顶部有多少（y 零滚动）；再次有两个选择。首先是静态的（某个数字），或者您必须从父元素中读取它。
在我的例子中，它距离顶部静态 150 像素。所以当你看到 150 时，它是我们没有滚动时从顶部开始的元素的多少。
#parent-element{position:relative;}
#promo{position:absolute;}
$(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');
});
【讨论】：
是的，只要您不设置 fixed 元素的位置（top 或 left 等）是可能的（您仍然可以使用 margin 设置相对位置，不过）。西蒙·博斯posted about this a while ago.
但是不要期望固定元素与非固定亲属一起滚动。
查看demo here。
【讨论】：
实现相对固定位置的另一个奇怪的解决方案是将您的容器转换为 iframe，这样您的固定元素可以固定到它的容器视口而不是整个页面。
【讨论】：
这很简单（根据下面的 HTML）
诀窍是不要在元素（div）上使用“位置：固定；”的顶部或左侧。 如果未指定这些，“固定内容”元素将显示为相对于封闭元素（带有“位置：相对；”的 div）而不是相对于浏览器窗口！！！
<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() 函数，但它会不必要地使这篇文章更长。我选择让它尽可能短。
【讨论】：
我有同样的问题，我们的一位团队成员给了我一个解决方案。 为了允许 div 固定位置并相对于其他 div，我们的解决方案是使用父容器包装 fix 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;
}
【讨论】：
/* 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%);
}
【讨论】：
如果您使用 JavaScript，这是可能的。在这种情况下，jQuery 插件 Sticky-Kit:
【讨论】：
我创建了一个 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%'});
});
【讨论】：
我的项目是带有 Bootstrap 4 的 .NET ASP Core 2 MVC Angular 4 模板。在第一行的主应用程序组件 html（即 app.component.html）中添加“sticky-top”，如下所示：
<div class='row sticky-top'>
<div class='col-sm-12'>
<nav-menu-top></nav-menu-top>
</div>
</div>
<div class="row">
<div class='col-sm-3'>
<nav-menu></nav-menu>
</div>
<div class='col-sm-9 body-content'>
<router-outlet></router-outlet>
</div>
</div>这是惯例还是我过于简化了？
【讨论】：
当您使用position:fixed CSS 规则并尝试应用top/left/right/bottom 时，它会相对于窗口定位元素。
一种解决方法是使用margin 属性而不是top/left/right/bottom
【讨论】：
神奇的是用屏幕宽度减去容器宽度再除以2：
//1400px is according to container max-width (left can be also right)
.fixed {
position: fixed;
right: calc((100vw - 1400px)/2);
}
注意：css calc() 函数几乎是，但不是 100% 支持。对于大多数用例，它肯定得到足够的支持。 Click here了解更多详情
片段（带有一个 300 像素的容器，只是为了适应这个网站的小部件）：
.container {
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.fixed {
position: fixed;
right: calc((100vw - 300px)/2);
}
@media screen and (max-width: 300px) {
right: 0px;
}<div style="height: 3000px">
<div class="container">
<button class="fixed">
FIXED CONTENT
</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, eum? Animi quidem accusamus minima vel, dolorem suscipit quia accusantium minus harum modi commodi distinctio! Iste voluptatum earum quam voluptate culpa ad, ipsum dolorum recusandae quis atque eligendi necessitatibus magnam nisi dolores beatae qui? Perspiciatis natus cum nostrum in quod odio sapiente doloremque rerum quo dolore tenetur facere, quisquam atque accusamus fugiat eligendi, deleniti nisi minus recusandae distinctio dignissimos! Dicta quos ipsum qui pariatur at vel veritatis veniam quisquam minus modi et voluptas aliquam laborum, cumque in quo magnam sapiente. Expedita ut dolore laboriosam tempora reprehenderit vero eaque blanditiis, cumque voluptatibus, velit nemo, veniam tenetur quisquam numquam adipisci quae odio repellendus neque incidunt! Cum odio corporis soluta voluptate nesciunt, quasi nobis deleniti neque porro expedita fugiat placeat alias autem pariatur animi error, dicta veritatis atque perspiciatis inventore tempora dolor ad! Mollitia in dolorem ipsam eos porro magni perspiciatis possimus maiores, itaque facere ut. Eos culpa eum error quia incidunt repellendus quam possimus, asperiores earum ipsum molestias dicta sint fugit atque veniam dolorum illo? Officia harum sint incidunt totam, reiciendis illum eos maxime sequi neque repellat quis, expedita eum, corporis quaerat nemo qui soluta aspernatur animi. Sint ad rem numquam omnis sit.
</div>
</div>【讨论】：
不久前我做过类似的事情。我对 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)
}
您需要设置宽度，然后它会获取窗口宽度并每隔几秒更改一次边距。我知道它很重，但它确实有效。
【讨论】：
我迟到了回答这个问题，但我相信这也是未来存在的常见问题，并且肯定会帮助未来的搜索者。
这可以通过应用技巧来解决。我们可以在这里使用calc。在 calc 中，我们可以使用 100 垂直宽度减去 90% 的宽度并除以 2。请根据您的需要更改 90%。在您的情况下，它可以是 100% 或 70%，具体取决于您的具体要求。
.your-class {
position: fixed;
right: calc((100vw - 90%)/2);
}
这对我有用。请注意，在我的情况下，我打算将浮动元素移到右侧。如果你想要它在左边，请使用left 而不是右边。
【讨论】：
为了实现与请求“相对于容器的固定位置”类似的目的，对我来说 position:fixed 不起作用，因为当我滚动页面时，元素保持在固定位置，但您可以使用overflow 功能。
在下面的片段中，检查 heading 在 parent 容器中是如何固定显示的，但是当您滚动 body 时它也会滚动
#grandpa{
width: 100vw;
height: 120vh;
background-color:rgb(236, 233, 233);
overflow:hidden;
}
#parent{
width: 200px;
height: 200px;
background-color:teal;
overflow:hidden;
}
#child1{
padding:1em
}
#child2{
height: 100px;
background-color:khaki;
overflow-y:scroll;
}<div id="grandpa">
<div id="parent">
<div id="child1">
heading
</div>
<div id="child2">
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
</div>
</div>
</div>【讨论】：
检查一下：
<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>
【讨论】：