Absolute positioning without extending parent

Question

I'm trying to position a "seeker" in a div element that has other elements in it. I want the seeker to be able to move on top of the content div, without pushing other content around, while also following the scrollbar. The area is resizable so I can't use constant width/height. Like the seeker in a video editor would.

This is what I've gotten so far

 #container { width: 200px; height:100px; background-color: gray; overflow: scroll; } #content { width: 300px; height: 120px; } #box { width: 40px; height: 40px; background-color: green; } #seekerContainer { position: relative; width: 100%; height: 100%; } #seeker { width: 4px; height: 100%; position: relative; background-color: blue; left: 10%; }

 <div id="container"> <div id="content"> <div id="seekerContainer"> <div id="seeker"></div> </div> <div id="box"></div> </div> </div>

And I've tried different combinations having the seekerContainer and seeker be position absolute/relative, but either the seeker wont follow the scrolling, or it extends the height of the div.

Any pointers to fix this?

Answer 1

I think this is what you are looking for:

 .container { width: 200px; height: 100px; background-color: gray; overflow: scroll; }.content { height: 500px; position: relative; }.box { width: 40px; height: 40px; background-color: green; }.seeker { width: 4px; height: 100%; position: absolute; background-color: blue; left: 10%; top: 0; }

 <div class="container"> <div class="content"> <div class="seeker"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

Also, you don't want to put id on every element and use id for styling. You should use classes for that. ID of the element has to be unique for the page so it's not very useful when you need to apply the same styling to more elements.