2

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?

Improve this question

2 Answers 2

Reset to default
12

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! :D

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 :)

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, Joseph, I still haven't tried your solution, I am reading your answer now, but it makes complete sense and of course it will work. Thank you so much. Solution accepted.
1

Its kinda tricky to say without looking at HTML, but you can try :

.child { position: absolute; top: 0; /* or any other value */ left: 0; } .parent { position: relative; }

You also need another child div to wrap your scrolling content.

Improve this answer

3 Comments

Now that i saw Josephs code i think i might have screwed up mine. I'm on ipad so i cant really test the scrolling.
Yeah, need another wrapper div to wrap the content.
i removed my fiddle as i think the answer is good as it is and my bad example fiddle degraded it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.