我正在尝试修复一个div,使其始终保持在屏幕顶部,使用:

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

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

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

有没有破解或解决方法来实现这一点?


当前回答

是的,根据规格,有办法。

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

我无意中注意到在申请时

-webkit-transform: translateZ(0);

相对于身体,它创建了一个固定的子对象(而不是视口)。所以我左边的固定元素和顶部的财产现在是相对于容器的。

所以我做了一些研究,发现这个问题已经被埃里克·迈耶(Eric Meyer)所涵盖,即使这感觉像是一个“把戏”,但事实证明这是规范的一部分:

对于布局由CSS框模型控制的元素,任何值如果转换结果为“无”,则会同时创建堆叠上下文和包含块。该对象充当包含用于固定定位子体的块。

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

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

但是

问题是,实现似乎有问题/有创意,因为元素也停止了固定的行为(即使这一点似乎不是规范的一部分)。

同样的行为在Safari、Chrome和Firefox中都可以找到,但在IE11中没有(其中固定元素仍然保持固定)。

另一件有趣的(未记录的)事情是,当一个固定元素包含在一个转换的元素中时,虽然它的顶部和左侧财产现在将与容器相关,但考虑到方框大小属性,它的滚动上下文将扩展到元素的边界,就像方框大小设置为border-box一样。对于一些有创意的人来说,这可能会成为一件玩物:)

TEST

其他回答

只需将顶部和左侧样式从固定位置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所在的位置,但将固定在那里。

为了实现与请求的“相对于容器的固定位置”类似的目的,对我来说,position:fixed不起作用,因为当我滚动页面时,元素保持在固定位置,但您可以使用溢出功能实现类似的效果。

在下面的狙击中,检查标题在父容器中是如何固定的,但是当你滚动主体时,它也会滚动

#爷爷{宽度:100vw;高度:120vh;背景色:rgb(236、233、233);溢出:隐藏;}#父母{宽度:200px;高度:200px;背景色:青色;溢出:隐藏;}#儿童1{填充:1em}#儿童2{高度:100px;背景色:卡其色;overflow-y:滚动;}<div id=“爷爷”><div id=“parent”><div id=“child1”>标题</div><div id=“child2”><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p></div></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();
});

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

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