固定的位置，但相对于容器

我试图修复一个div所以它总是坚持到屏幕的顶部，使用：

 position: fixed; top: 0px; right: 0px; 

但是， div是在一个居中的容器中。 当我使用position:fixed修复div相对于浏览器窗口，如它在浏览器的右侧。 相反，它应该相对于容器固定。

我知道这个position:absolute可以用来修复相对于div的元素，但是当你向下滚动页面时，元素消失，不会像position:fixed一样粘到顶部。

是否有黑客或解决方法来实现这一目标？

Answer 1

简短的回答： 不。 （现在可以使用CSS转换，请参阅下面的编辑）

长答案：使用“固定”定位的问题是它将stream失的元素。 因此它不能相对于其父母重新定位，因为它好像没有一个。 但是，如果容器具有固定的已知宽度，则可以使用如下所示的内容：

 #fixedContainer { position: fixed; width: 600px; height: 200px; left: 50%; top: 0%; margin-left: -300px; /*half the width*/ } 

http://jsfiddle.net/HFjU6/1/

编辑（03/2015）：

这是过时的信息。 现在可以在CSS3变换的魔力的帮助下将dynamic大小的内容（水平和垂直）居中。 同样的原则适用，但不使用保证金来抵消你的容器，你可以使用translateX(-50%) 。 这不适用于上面的保证金窍门，因为你不知道补偿多less，除非宽度是固定的，你不能使用相对值（如50% ），因为它将相对于父项而不是它应用于的元素。 transform行为不同。 它的值是相对于它们被应用的元素。 因此， transform 50%意味着元素宽度的一半，而边距的50%是父宽度的一半。 这是一个IE9 +解决scheme

使用与上面的例子类似的代码，我使用完全dynamic的宽度和高度重新创build了相同的场景：

 .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在这个答案指出了我

Answer 2

其实这是可能的，而接受的答案只涉及集中，这是很直接的。 你也真的不需要使用JavaScript。

这将让你处理任何情况：

设置所有东西，如果你想要的位置：绝对内部的一个位置：相对容器，然后创build一个新的固定位置div在div中的position: absolute ，但不要设置其顶部和左侧的属性。 然后将它固定在任何你想要的地方，相对于容器。

例如：

 /* 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> 

Answer 3

是的，根据规格，有一个方法。

虽然我同意格雷姆布莱克伍德应该是被接受的答案，因为它实际上解决了这个问题，应该指出的是，一个固定的元素可以相对于其容器定位。

我意外地注意到，申请时

 -webkit-transform: translateZ(0); 

对身体来说，它相对于它而言是一个固定的孩子（而不是视口）。 所以我的固定元素left和top属性现在相对于容器。

所以我做了一些研究，发现这个问题已经被Eric Meyer所覆盖了，即使它感觉像是一个“诡计”，事实certificate这是规范的一部分：

对于其布局由CSS框模型控制的元素，转换之外的任何值都不会导致创build堆栈上下文和包含块。 该对象充当固定位置后代的包含块。

http://www.w3.org/TR/css3-transforms/

所以，如果您对父元素应用任何转换，它将成为包含块。

但…

问题是实现看起来有问题/创造性，因为元素也停止performance为固定的（即使这个位似乎不是规范的一部分）。

在Safari，Chrome和Firefox中都可以find相同的行为，但是在IE11中（固定元素仍然保持固定）。

另一个有趣的（未logging的）事情是，当一个固定的元素被包含在一个被转换的元素内，而它的top和left属性现在将与容器相关，考虑到box-sizing属性，它的滚动上下文将延伸到元素，好像箱子尺寸设置为border-box 。 对于那里的一些创意，这可能会成为一个玩具:)

testing

Answer 4

答案是肯定的，只要你没有设置left: 0或right: 0之后，你把div的位置设置为fixed。

http://jsfiddle.net/T2PL5/85/

检出侧栏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> 

Answer 5

我已经创build了这个jQuery插件来解决我有一个类似的问题，我有一个居中的容器（表格数据），我希望页眉固定到页面的顶部滚动时，但我希望它锚定到表格数据，所以无论我把容器放在哪里（居中，左边，右边），还可以让它左右移动时水平滚动的页面。

这里是链接到这个jQuery插件，可以解决这个问题：

https://github.com/bigspotteddog/ScrollToFixed

这个插件的描述如下：

这个插件用于将元素固定到页面的顶部，如果元素将垂直滚动到视图外的话; 但是，它确实允许元素继续向左或向右移动水平滚动。

给定一个选项marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动; 但是，当页面向左或向右滚动时，元素仍然会水平移动。 一旦页面向下滚动到目标位置，元素将被恢复到页面上的原始位置。

此插件已在Firefox 3/4，Google Chrome 10/11，Safari 5和Internet Explorer 8/9中进行了testing。

用于您的特定情况：

 <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(); }); 

Answer 6

只要拿出顶部和左侧的样式出固定的位置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的位置，但将在那里修复。

Answer 7

我必须通过广告来做到这一点，我的客户希望在广告内容之外。 我只是做了以下，它像一个魅力工作！

 <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> 

Answer 8

你有position: sticky是一种定位元素的新方法，在概念上类似于position: fixed 。 不同之处在于， position: sticky的元素的行为与position: relative在父元素中相同，直到在视口中满足给定的偏移阈值。

在Chrome 56（目前testing截至2016年12月，2017年1月稳定）位置：粘滞现在回来了。

https://developers.google.com/web/updates/2016/12/position-sticky

更多的细节在坚持你的着陆！ 位置：WebKit中的粘性土地 。

Answer 9

两个HTML元素和纯CSS（现代浏览器）

看到这个jsFiddle的例子。 resize，查看固定元素如何随着浮动元素一起移动。使用最内侧滚动条来查看滚动在一个站点上的工作方式（固定元素保持固定）。

正如许多人所说，一个关键是不在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元素，并且仍然具有与左上angular相关的所有元素。 但是，只有将它们全部放在容器中，这才是真实的， 因为这种比较小提琴表明，如果分散在容器内容中，则定位变得不可靠 。

无论包装是静态的 ， 相对的还是绝对的定位，都没关系。

Answer 10

你可以试试我的jQuery插件FixTo 。

用法：

 $('#mydiv').fixTo('#centeredContainer'); 

Answer 11

实现相对固定位置的另一个奇怪的解决scheme是将您的容器转换为iframe，这样您的固定元素可以固定到容器的视口而不是整个页面。

Answer 12

纯粹的CSS你不能做到这一点; 至less我没有。 但是，你可以用jQuery来做到这一点。 我会解释我的问题，稍作改动就可以使用它。

所以一开始，我想我的元素有一个固定的顶部（从窗口的顶部），并从父元素inheritance左侧组件（因为父元素居中）。 要设置左侧组件，只需将您的元素放置到父元素中，并为父元素设置position:relative 。

然后你需要知道当一个滚动条位于顶部（y零滚动）时，元素的顶部有多less; 有两个选项。 首先是静态的（一些数字），或者你必须从父元素中读取它。

在我的情况下，它是从顶部静态的150像素。 所以当你看到150的时候，我们没有滚动的时候是多less元素。

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'); }); 

Answer 13

这很简单（按照下面的HTML）

诀窍是不要使用“position：fixed;”的元素（div）顶部或左边。 如果没有指定，那么“固定内容”元素将出现RELATIVE封闭元素（div与“position：relative;”）INSTEAD OF相对于浏览器窗口！

 <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> 

以上允许我find一个closures“X”button在垂直滚动的div中的很多文本的顶部。 “X”就位（不随滚动文本移动，当用户调整浏览器窗口的宽度时，它会随着封闭的div容器向左或向右移动），因此它是垂直“固定”的，但相对于封闭元素水平！

在我做这个工作之前，当我滚动文本内容时，“X”滚动并且看不见。

抱歉不提供我的javascript的hideDiv（）函数，但它会不必要地使这个post更长。 我select尽可能缩短。

Answer 14

我创build了一个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/

Answer 15

我一会儿做了类似的事情 我对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) } 

您将需要设置宽度，然后获取窗口宽度并每隔几秒更改边距。 我知道这是沉重的，但它的作品。

Answer 16

如果你使用JavaScript，这是可能的。 在这种情况下，jQuery插件Sticky-Kit ：

Answer 17

我有同样的问题，我们的一个团队成员给了我一个解决scheme。 要允许div修复位置和相对于其他div，我们的解决scheme是使用父容器包装修复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; } 

Answer 18

我的项目是带有Bootstrap的.NET ASP Core 2 MVC Angular 4模板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> 

Answer 19

检查这个：

 <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>