CODEWITHSUNDEEP
htmlcsslayoutposition
wayofthefuture
wayofthefuture

Reputation: 9455

Fixed element inside positioned div with scroller?

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

Answers (2)

Peyman Mohamadpour
Peyman Mohamadpour

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

Evochrome
Evochrome

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

Related Questions