固定位置但相对于容器

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

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

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

我知道position:absolute可用于修复相对于div的元素，但是当您向下滚动页面时，元素会消失并且不会像position:fixed那样粘在顶部。

有没有黑客或变通方法来实现这一目标？

1266679 次浏览

小开

最佳答案

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

长回答：使用“固定”定位的问题是它采用元素流出。因此，它不能相对于其父级重新定位，因为它好像没有。但是，如果容器是固定的、已知的宽度，您可以使用如下内容：

#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转换的帮助下将动态大小的内容居中（水平和垂直）。同样的原理也适用，但不是使用边距来偏移容器，您可以使用translateX(-50%)。这对上述边距技巧不起作用，因为您不知道要偏移多少，除非宽度是固定的，并且您不能使用相对值（如50%），因为它将相对于父级而不是应用于它的元素。transform的行为不同。它的值是相对于它们应用于的元素的。因此，transform的50%表示元素宽度的一半，而50%表示边距是父元素宽度的一半。这是一个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指出它给我在这个答案

小开

不久前我做了类似的事情。我对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)}

您需要设置宽度，然后它会获取窗口宽度并每隔几秒钟更改一次边距。我知道它很重，但它有效。

小开

我创建了这个jQuery插件来解决我遇到的一个类似的问题，我有一个居中的容器（表格数据），我希望标题在列表滚动时固定在页面顶部，但我希望它锚定到表格数据，这样它就可以放在我放置容器的任何地方（居中，左，右），并允许它在水平滚动时随着页面左右移动。

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

该插件的描述如下：

此插件用于将元素固定到页面顶部，如果元素会垂直滚动出视图；但是，它确实允许元素随着水平滚动继续向左或向右移动。

如果有一个选项，当垂直滚动到达目标位置时，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍将水平移动。一旦页面向下滚动到目标位置，元素将恢复到页面上的原始位置。

此插件已在Firefox 3/4，GoogleChrome10/11，Safari5和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中取出即可

<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所在的位置，但将固定在那里。

小开

检查这个：

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

小开

我必须做一个广告，我的客户希望坐在内容区之外。我只是做了以下事情，它就像一个魅力！

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

小开

实现相对固定位置的另一个奇怪的解决方案是将容器转换为ifram，这样固定元素就可以固定在容器的视口而不是整个页面上。

小开

实际上这是可能的，并且公认的答案只涉及集中化，这很简单。此外，您真的不需要使用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渲染框阴影模糊像素作为固定位置元素的边距，但它似乎是一个bug。

小开

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

用法：

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

小开

答案是肯定的，只要您在将div位置设置为固定后不设置left: 0或right: 0。

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>

小开

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

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

我偶然注意到在申请时

-webkit-transform: translateZ(0);

对于主体，它创建了一个相对于它的固定子元素（而不是视口）。所以我的固定元素left和top属性现在是相对于容器的。

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

对于布局由CSS框模型控制的元素，任何值对于转换结果，除了无之外，都创建了一个堆叠上下文和包含块。该对象充当包含固定定位后代的块。

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

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

可是…

问题是实现看起来有缺陷/有创意，因为元素也不再表现为固定的（即使这个位似乎不是规范的一部分）。

在Safari、Chrome和Firefox中也会发现相同的行为，但在IE11中不会（其中固定元素仍然保持固定）。

另一个有趣的（未记录的）事情是，当一个固定元素包含在转换后的元素中时，当它的top和left属性现在将与容器相关，尊重box-sizing属性时，它的滚动上下文将延伸到元素的边界上，就好像box大小设置为border-box一样。对于一些有创意的人来说，这可能会成为一个玩物：）

测试

小开

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

在Chrome56（目前测试版截至2016年12月，稳定在2017年1月）位置：粘性现在回来了。

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

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

小开

使用纯CSS你无法做到这一点；至少我没有。但是你可以用jQuery非常简单地做到这一点。我会解释我的问题，只要稍加修改，你就可以使用它。

所以首先，我希望我的元素有一个固定的顶部（从窗口顶部），以及一个从父元素继承的左侧组件（因为父元素居中）。要设置左侧组件，只需将您的元素放入父元素并为父元素设置position:relative。

然后，您需要知道当滚动条位于顶部时，您的元素从顶部开始有多少（y零滚动）；再次有两个选项。首先是静态的（某个数字），或者您必须从父元素中读取它。

在我的例子中，它是从顶部静态的150像素。所以当你看到150时，它是我们没有滚动时从顶部的元素是多少。

css

#parent-element{position:relative;}#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on startwtop=parseInt($(window).scrollTop());$("#promo").css('top',150+wtop+'px'); });$(window).scroll(function () { //This is when the window is scrollingwtop=parseInt($(window).scrollTop());$("#promo").css('top',150+wtop+'px');});

小开

两个超文本标记语言元素和纯CSS（现代浏览器）
请参阅这个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元素，并且仍然有所有与左上角相关的元素。但这只适用于它们都放在容器由于这个比较小提琴表明，如果分散在容器内容，定位变得不可靠中的第一位。
无论包装器在定位上是静态、相对还是绝对，都无关紧要。

小开

这很容易（根据下面的超文本标记语言）

诀窍是不要在元素（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> lots of Text To Be Scrolled vertically...bhah! blah! blah!</div></div>

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

在我开始工作之前，当我向下滚动文本内容时，“X”向上滚动并消失在视线之外。

抱歉没有提供我的javascript hideDiv（）函数，但这会不必要地使这篇文章更长。我选择尽可能短。

小开

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

小开

我创建了一个jsfiddle来演示它是如何使用转换工作的。

超文本标记语言

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

小开

我遇到了同样的问题，我们的一个团队成员给了我一个解决方案。为了允许div修复位置和相对于其他div，我们的解决方案是使用父容器包装修复div和scroll div。
.container {position: relative;flex:1;display:flex;} .fix {position:absolute;}
<div class="container"><div class="scroll"></div><div class="fix"></div></div>

小开

我的项目是带有Bootstrap 4的. NET ASP Core 2 MVC Angular 4模板。在第一行的主端组件html（即app.component.html）中添加“粘顶”，如下所示：

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

这是惯例还是我过于简化了？

小开

2019解决方案：您可以使用#0属性。

这是一个示例CODEPEN，演示了用法以及它与position: fixed的不同之处。

它的行为方式解释如下：

具有粘性位置的元素是基于用户的滚动位置定位的。它基本上就像position: relative一样，直到元素滚动超过特定的偏移量，在这种情况下它变成位置：固定。当它滚动回来时，它会回到以前的（相对）位置。
它影响页面中其他元素的流动，即占据页面上的特定空间（就像position: relative）。
如果它定义在某个容器内，它相对于该容器定位。如果容器有一些溢出（滚动），根据滚动偏移量，它变成位置：固定。

因此，如果您想在容器内实现固定功能，请使用粘性。

小开

/* 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%);}

小开

是的，只要您不设置fixed元素的位置（top或left等），这是可能的（不过您仍然可以使用margin来设置相对位置）。Simon Bos发布关于这一段时间前。

但是，不要期望固定元素与非固定亲属一起滚动。

见演示在这里。

小开

当您使用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%支持。对于大多数用例来说，它肯定得到了足够的支持。点击这里了解更多详细信息
片段（带有300px容器，仅适合本网站的小部件）：
.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>

小开

免责声明：
这只是标题的答案：固定位置但相对于容器。对于实际用例，用户要求position: sticky是要走的路。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
它相对于视口建立的初始包含块定位，除非它的祖先之一将转换、透视或过滤器属性设置为其他属性
你只需要向容器添加一个转换，固定元素的位置将相对于容器。我认为transform: translateX(0);应该足够了。

小开

如果容器使用某些遏制规则，则可以相对于其容器定位具有固定位置的元素。
<div class='parent'><div class='child'></div></div>
.parent {contain: content;} .child {position: fixed;top: 0;left: 0;}

小开

如果您将position: fixed;更改为position: sticky;，您就有了解决方案
所以你的代码应该是：
position: sticky;top: 0;right: 0;
现在其他div不会在下面滑动。

小开

我来晚了回答这个问题，但我相信这是一个共同的问题，存在于未来以及肯定会帮助未来的搜索者。
这可以通过应用技巧来解决。我们可以在这里使用calc。在calc中，我们可以使用100垂直宽度，减去90%的宽度并除以2。请根据您的需要对90%进行更改。在您的情况下，它可以是100%或70%，具体取决于您的具体要求。
.your-class {position: fixed;right: calc((100vw - 90%)/2);}
这对我有效。请注意，在我的例子中，我打算将浮动元素移到右侧。如果您希望它在左侧，请使用left而不是右侧。

小开

为了实现与请求的“相对于容器的固定位置”类似的目的，对我来说position:fixed不起作用，因为当我滚动页面时，元素保持在固定位置，但您可以使用overflow功能实现类似的效果。
在下面的片段中，检查标题在父母容器中是如何固定的，但是当您滚动身体时，它也会滚动
#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>

小开

根据我的经验，处理此问题的最佳方法是将元素踢出父元素。
position: sticky对我不起作用，因为它没有固定在滚动上，position:absolute不令人满意，因为它把它从文档流中取出。
我所做的只是将元素与父元素放在同一级别（以便它们是兄弟元素）。这样它就固定在元素之上，不会从流程中删除。不需要额外复杂的css或js。

小开

在这种情况下，您可以根据其父元素更改固定元素的位置。
您可以使用以下代码获取父元素的位置。
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});}

提交答案