Question

I need to set a child div as fixed (position: fixed) in relation to its parent div. The parent div is set as overflow: auto.

Just to make my point very clear: I don’t want the child div to be fixed in relation to the HTML screen, but in relation to the parent div. The parent div scrolls, because it is set as overflow: auto. It has a lot of text, which causes the scrollbars to appear (not the screen scrollbars, but the div’s). I need the child div to hold a fixed position in relation to its parent div.

Is there a pure HTML+CSS solution for this, or is it only possible to achieve through javascript?

Answer 1

I see what you’re saying… basically this is the problem. With fixed position you get the element to stick there while you scroll but that has to be relative only to the window. If you try to make it relative to the container with position:absolute, it doesn’t stick but scrolls with the content… the solution? a wrapper of course! 😀

basic structure is this:

HTML

<div class="blah">
    <div class="inner">text content</div>
    <div class="meh">fixed content</div>
</div>

CSS

div.blah
{
    position:relative;
}

div.inner
{
    width:500px;
    height:500px;
    overflow:auto;
}

div.meh
{
  background-color:#f00;
  position:absolute;
  left:20px;
  bottom:20px;   
}

enjoy 🙂