我可以定位一个相对于父项的固定元素吗？
我发现，当我定位一个元素固定，父母是否定位是否相对并不重要，它将位置固定，相对于窗口？
CSS
#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; } #feedback { position: fixed; right: 0; top: 120px; } HTML
<div id="wrapper"> ... <a id="feedback" href="#">Feedback</a> </div>
让我提供两个可能的问题的答案。 请注意，您现有的标题（和原始post）提出的问题不同于您在编辑和后续评论中寻求的问题。
要将相对于父元素的“固定”元素进行 position:absolute ，您需要在子元素上使用position:absolute ，而在父元素上使用默认或静态以外的任何位置模式。
例如：
#parentDiv { position:relative; } #childDiv { position:absolute; left:50px; top:20px; }
这将把childDiv元素相对于parentDiv的位置向左放置50个像素，向下放置20个像素。
要定位一个相对于窗口“固定”的元素 ，你需要position:fixed ，并且可以使用top: ， left: ， right:和bottom:来定位你认为合适的位置。
例如：
#yourDiv { position:fixed; bottom:40px; right:40px; }
这将使您的yourDiv相对于Web浏览器窗口固定，距底边40像素，右边40像素。
CSS规范要求该position:fixed被锚定到视口，而不是被包含的定位元素。
如果您必须指定相对于父级的坐标，则必须先使用JavaScript来查找父级相对于视口的位置，然后相应地设置子级（固定）元素的位置。
DISCOURAGED选项 ：WebKit（Chrome浏览器，Safari浏览器，iOS浏览器，和其他一些）具有-webkit-sticky限制元素被定位在它的容器和视口。 根据提交消息：
-webkit-sticky…约束要放置在其容器框和视口的交点内的元素。粘性定位元素的行为就像位置：相对（空间保留在stream动中），但具有由粘性位置确定的偏移量。 改变了isInFlowPositioned（）来覆盖相对和粘性。
根据您的devise目标，这种行为在某些情况下可能会有所帮助。 但它是实验性的，并不接近一个标准呢。 而且由于Chrome需要实验性标志， -webkit-sticky 现在还不是真正的解决scheme 。
第一，设置position: fixed ， left: 50% ，第二 – 现在你的开始是一个中心，你可以设置新的位置与保证金。
2016更新
现在在现代浏览器中可以定位相对于其容器固定的元素。 具有transform属性的元素充当其任何固定位置子元素的视口。
.context { width: 300px; height: 250px; margin: 100px; transform: translateZ(0); } .viewport { width: 100%; height: 100%; border: 1px solid black; overflow: scroll; } .centered { position: fixed; left: 50%; bottom: 15px; transform: translateX(-50%); }
<div class="context"> <div class="viewport"> <div class="canvas"> <table> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> <tr> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> <td>stuff</td> </tr> </table> <button class="centered">OK</button> </div> </div> </div>
这里是Jon Adams上面的一个示例，以便使用jQuery将div（工具栏）固定到页面元素的右侧。 这个想法是find从视口的右侧到页面元素的右侧的距离，并保持工具栏的右侧！
HTML
<div id="pageElement"></div> <div id="toolbar"></div>
CSS
#toolbar { position: fixed; } ....
jQuery的
function placeOnRightHandEdgeOfElement(toolbar, pageElement) { $(toolbar).css("right", $(window).scrollLeft() + $(window).width() - $(pageElement).offset().left - parseInt($(pageElement).css("borderLeftWidth"),10) - $(pageElement).width() + "px"); } $(document).ready(function() { $(window).resize(function() { placeOnRightHandEdgeOfElement("#toolbar", "#pageElement"); }); $(window).scroll(function () { placeOnRightHandEdgeOfElement("#toolbar", "#pageElement"); }); $("#toolbar").resize(); });
我知道这是超级老，但没有find（纯CSS）的答案，我正在寻找我想出了这个解决scheme（部分抽象medium.com ），并认为这可能会帮助其他人想做同样的事情。
如果你结合@ DuckMaestro的答案，你可以定位一个相对于父母（实际上是祖父母）固定的元素。 使用position: absolute; 将位置放置在父元素中的position: relative; 然后position: fixed; 在绝对定位的元素内的元素像这样：
HTML
<div class="relative"> <div class="absolute"> <a class="fixed-feedback">This element will be fixed</a> </div> </div>
CSS
.relative { margin: 0 auto; position: relative; width: 300px; } .absolute { position: absolute; right: 0; top: 0; width: 50px; } .fixed-feedback { position: fixed; top: 120px; width: 50px; }
例
就像@JonAdams所说， position: fixed的定义要求元素相对于视口的位置，但是你可以用这个解决scheme来解决这个问题的水平方面。
注意：这与在固定元素上设置right值或left值不同，因为这会在调整窗口大小时使其水平移动。
我知道这是一个比较老的post，但是我觉得在这个网站上已经可以findJiew Meng正在尝试做的一个很好的例子。 看看这里的侧面菜单： https : //stackoverflow.com/faq#questions 。 看着它，而不深入，我可以告诉JavaScript附加一个固定的位置，一旦滚动命中锚标记下，并取消固定的位置，如果滚动高于同一个锚标记。 希望这会让一个人开始正确的方向。
这是一个旧的post，但我会离开这里我的JavaScript解决scheme，以防万一有人需要它。
// you only need this function function sticky( _el ){ _el.parentElement.addEventListener("scroll", function(){ _el.style.transform = "translateY("+this.scrollTop+"px)"; }); } // how to make it work: // get the element you want to be sticky var el = document.querySelector("#blbl > div"); // give the element as argument, done. sticky(el);
#blbl{ position:relative; height:200px; overflow: auto; background: #eee; } #blbl > div{ position:absolute; padding:50px; top:10px; left:10px; background: #f00 }
<div id="blbl" > <div><!-- sticky div --></div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </div>
多个div我设法得到一个固定的y和绝对x的divs。 在我的情况下，我需要在左侧和右侧的div，alignment到一个居中的1180px宽度div。
<div class="parentdiv" style=" background: transparent; margin: auto; width: 100%; max-width: 1220px; height: 10px; text-align: center;"> <div style=" position: fixed; width: 100%; max-width: 1220px;"> <div style=" position: absolute; background: black; height: 20px; width: 20px; left: 0;"> </div> <div style=" width: 20px; height: 20px; background: blue; position: absolute; right: 0;"> </div> </div> </div>
它运作良好！ 参考原始答案的详细信息： https : //stackoverflow.com/a/11833892/5385623
CSS：
.level1 { position: relative; } .level2 { position: absolute; } .level3 { position: fixed; /* Do not set top / left! */ }
HTML：
<div class='level1'> <div class='level2'> <div class='level3'> Content </div> </div> </div>
