keep a div in place within another div

Question

I have some trouble keeping a div in it place.

My page is divided into two sides. Within the right side I want to have a couple of divs, the first of which should stay on top of it's parent div. The rest should scroll underneath this first div.

I tried it with position:fixed but that binds it to the screen instead of the wrapper div.

My HTML is as follows

<div class="side"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis cupiditate a aut totam similique non ipsam, sapiente, nisi possimus dolorum odit voluptatum? Vero nostrum, ab? </div> <div class="side"> <div class="wrapper"> <div class="box one">Lorem ipsum dolor sit amet.</div> <div class="box two">Lorem ipsum dolor sit amet.</div> <div class="box two">Lorem ipsum dolor sit amet.</div> </div> </div>

My CSS is as follows

 .side{ width: 180px; float:left; } .wrapper{ background-color:blue; width: 180px; height: 300px; overflow: scroll; position: relative; } .box{ width: 360px; } .one{ position: absolute; top: 0; left: 0; height: 100px; background-color: red; z-index: 2; } .two{ z-index: 1; margin: 0; background-color: green; height: 400px; } .wrapper > div:nth-child(2){ margin-top: 100px; }

I made a demo at jsfiddle: Demo

To recapture, the red div (box one) needs to stay on top of the div while the two green divs (box two) slide underneath them as you scroll them up.

Any help would be greatly appreciated.

Sam Eaton · Accepted Answer · 2015-03-28 05:01:27Z

1

If I'm getting what you mean, just make the .one class fixed and remove the top and left attributes:

 .one{ position: fixed; height: 100px; background-color: red; z-index: 2; }

http://jsfiddle.net/oouyu8av/1/

answered Mar 28, 2015 at 5:01

Sam Eaton

1,8541 gold badge15 silver badges19 bronze badges

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

2 Comments

FarCreek Over a year ago

That was indeed what I wanted. I thought the top and left attributes would work in relation to the wrapper, the same as with position:absolute. The solution is usually 10 times easier then you think once something doesn't work on the first try and you start to tinker around. Thank you very much.

Sam Eaton Over a year ago

Yeah, between static, relative, absolute, and fixed it seems that fixed is always the trouble maker in the family—especially on mobile.

Collectives™ on Stack Overflow

keep a div in place within another div

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related