I need to position a header to be fixed within the containing parent so that it follows when scrolling. The problem is that

position:fixed

fixes the position to the browser, not the parent. What this is resulting in is that when I have a container that has a horizontal scroll for overflow in the width (the content is wider than the container), my fixed header does not have the overflow-scroll as the content of the table does.

See this fiddle demo

So the goal here is to fix the position of the header, but fixed relative to it's parent container. In this fiddle, you can see that I've mented out a block of 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;   
}

If you replace the current css block (with transform set to none) with the one with translateZ, the header will get positioned within it's parent container, but is no longer fixed.

Anyone know how to solve this? Preferred solution would be CSS/HTML only and avoid JS but if nothing else, then JS is of course what I need to go with!

I need to position a header to be fixed within the containing parent so that it follows when scrolling. The problem is that

position:fixed

fixes the position to the browser, not the parent. What this is resulting in is that when I have a container that has a horizontal scroll for overflow in the width (the content is wider than the container), my fixed header does not have the overflow-scroll as the content of the table does.

See this fiddle demo

So the goal here is to fix the position of the header, but fixed relative to it's parent container. In this fiddle, you can see that I've mented out a block of 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;   
}

If you replace the current css block (with transform set to none) with the one with translateZ, the header will get positioned within it's parent container, but is no longer fixed.

Anyone know how to solve this? Preferred solution would be CSS/HTML only and avoid JS but if nothing else, then JS is of course what I need to go with!

• javascript
• html
• css

• 7 to fix something relative to ists parent, you'd need position:relative on the parent and position:absolute on the child – atmd Commented Jul 21, 2015 at 10:08

3 Answers 3

CSS can't do this by itself.

Position: fixed works in relation to the viewport, not it's containing element.

I've seen an attempt to solve this problem using the CSS3 transform property, but (as you noted in your ment to my first answer) it doesn't seem to work.

I understand you can't use any client-side library but that's the only solution available to my knowledge. For you and others who may one day need this, here's a solution that works. It employs a bit of jQuery:

Positioning an element inside another element with the positioned element fixed along the x and y axes (i.e. position fixed horizontally and vertically).

http://jsfiddle/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 (relevant section)

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

set the header's position to 'absolute', and it's parent container (which you want it to be relative to) to 'relative', and set it to stick to the top of the parent with 'top: 0'

CSS:

.container {
  position: relative;
}

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

To keep an element fixed within a parent cannot be done with position: fixed because position: fixed takes the element out of the flow and therefore it has no parent. It positions itself relative to the viewport.

To acplish your goal, while keeping things simple and efficient, you may want to consider Tether, "a client-side library to make absolutely positioned elements attach to elements in the page efficiently".

Hope this helps. Good luck.