Reputation: 9455
I am trying to get an absolutely positioned element to stay in its position while someone scrolls the content of the parent div. I've read many questions about applying positioning to the parent div of either absolute or relative, but still can't seem to get an absolute positioned element inside of a scrolling div to work. The content inside the div is greater than the height of the div. How to get the child div to maintain its position through the scroll?
Fiddle: https://jsfiddle.net/724vpsLf/1/
<div id="wrap">
<div id="abs">
Abs Arrow
</div>
</div>
#wrap {
position: fixed:
top: 0;
left: 0;
height: 80%;
width: 200px;
}
#abs {
position: absolute;
bottom: 10px;
right: 0px;
background: #f00;
color: #fff;
}
Upvotes: 1
Views: 50
Reputation: 17964
Are you after something like this?
#parent{
position: relative;
}
#wrap {
position:absolute;
width: 200px;
height: 200px;
background-color:#EFEFEF;
overflow:visible;
}
#abs {
position:fixed;
top: 20px;
background: #f00;
color: #fff;
}
<div id="parent">
<div id="wrap">
<div id="abs">Abs Arrow</div>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
</div>
</div>
Upvotes: 1
Reputation: 1215
Instead of position: absolute
, try position:fixed
. position:absolute
won't work the way you use it. ;)
CSS + HTML:
#wrap {
position: fixed:
top:0;
left:0;
height: 80%;
width: 200px;
}
#abs {
position: fixed;
bottom: 10px;
right: 0px;
background: #f00;
color: #fff;
}
<div id="wrap">
<div id="abs">
Abs Arrow
</div>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
</div>
Hope it helped :)
Upvotes: 1