Question

我需要将一个标题定位在包含父项中，以便在滚动时跟随它。问题是

position:fixed

将位置修复为浏览器，而不是父级。这导致的是，当我有一个容器在宽度上有一个水平滚动溢出（内容比容器宽）时，我的固定头没有像表的内容那样的溢出滚动。

请参阅此fiddle demo

所以这里的目标是修复标题的位置，但相对于它的父容器是固定的。在这个小提琴中，你可以看到我已经注释掉了一块css：

.container{

     /*-webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);*/

     -webkit-transform: none;
     -moz-transform: none;
     -ms-transform: none;
     transform: none;   
}

如果将当前的css块（变换设置为none）替换为带有translateZ的块，则标题将位于其父容器中，但不再固定。

任何人都知道如何解决这个问题？首选解决方案只是CSS / HTML并避免使用JS，但如果没有别的话，那么JS当然是我需要的！

Answer 1

CSS无法独立完成此任务。

Position: fixed与视口有关，而不是它包含元素。

我已经看过an attempt to solve this problem使用CSS3 transform属性，但是（正如您在我的第一个回答的评论中所指出的那样）它似乎无法正常工作。

我知道您无法使用任何客户端库，但这是我所知道的唯一解决方案。对于您和其他可能有一天需要的人，这里有一个有效的解决方案。它使用了一些jQuery：

将元素定位在另一个元素中，定位元素沿x和y轴固定（即位置水平和垂直固定）。

http://jsfiddle.net/8086p69z/8/

<强> HTML

<div class="moving-article">

    <div class="container">

    <header class="fixed-header">FIXED HEADER</header>

        <ul>
        <li>SCROLL</li>
        <li>SCROLL</li>
        <li>SCROLL</li>
        </ul>    

    </div>

</div>

CSS（相关部分）

.moving-article {
    height: 150px;
    width: 75%;
    overflow-x: scroll;     
}

.fixed-header {
    background: rgba(0,0,0,0.5);
    width: 50%;
    text-align: center;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
}

.container{
    width: 1000px;
}

<强>的jQuery

var leftOffset = parseInt($(".fixed-header").css('left'));
$(window).scroll(function(){
    $('.fixed-header').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

Answer 2

由于position: fixed采用元素out of the flow并因此没有父级，因此无法使用position: fixed将元素固定在父级中。它相对于视口定位。

为了实现目标，在保持简单高效的同时，您可能需要考虑Tether，＆＃34;客户端库，以使绝对定位的元素有效地附加到页面中的元素＆＃34;

希望这会有所帮助。祝你好运。

Answer 3

将标题的位置设置为'absolute'，并将它的父容器（您希望它相对于）设置为'relative'，并将其设置为坚持使用'top：0'的父级顶部

CSS：

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
}

位置固定在容器元素中而不是浏览器/视口

3 个答案: