How to set an element position to fixed inside its parent container

Question

I would like to set a position of an elements to fixed just like on this google+ example where the button is fixed relatively to the browser:

But my problem here is i have multiple parent-container and each container had an element with a class to-top that needs to be place fixed and relative to parent-container in the bottom right corner.

And

I would like to set the to-top element fixed limitation to its own parent-container only so when the user scrolls the to-top only moves within its parent-container

Here is my fiddle to make it clear. Hope i explained in well. DEMO

What you're looking for is a sticky position, where it remains fixed relative to the viewport but confined by the bounds of its parents. This question has been addressed previously in other questions. There is also a polyfill available: https://github.com/filamentgroup/fixed-sticky — Terry, Oct 25 '16 at 03:50
Thank you for your response sir please wait as i try your suggestions — Shift 'n Tab, Oct 25 '16 at 03:52

score 0 · Answer 1 · answered Oct 25 '16 at 04:36

Add Id in Div Like class="parent-container row3" id="row3". And add Anchor tag href inside id like this <a href="#row3">UP</a>

That Call Parent Div Top when Click Up Button. try this

Live Demo Here

Snippet Example Below

.wrapper
{
  height: 500px;
  overflow: auto;
}

.header
{
  background: seagreen;
  color: white;
  padding: 5px;
}

.parent-container
{
  height: 700px;
  padding: 5px;
}

.parent-container > a
{
   display: block;
   padding: 5px;
   margin: 5px;
   background: #eeeeee;
}

.row1
{
  background: lightcyan;  
}

.row2
{
  background: lightblue;  
}

.row3
{
  background: lightgreen;  
}

.to-top
{
  position: relative;
  top: 290px;
  width: auto;
  float: right;
}

<div class="wrapper">
  <div class="holder">
     <div class="parent-container row1" id="row1">
       <div class="header">Header 1</div>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       
       <div class="to-top"><a href="#row1">UP</a></div>
     </div>
     <div class="parent-container row2" id="row2">
       <div class="header">Header 2</div>
       <a href="#">Item 1</a>
       
       <div class="to-top"><a href="#row2">UP</a></div>
     </div>
     <div class="parent-container row3" id="row3">
       <div class="header">Header 3</div>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       
       <div class="to-top" ><a href="#row3">UP</a></div>
     </div>
  </div>
</div>

hello sir thanks for the response but that is not what i am trying to do :) — Shift 'n Tab, Oct 25 '16 at 04:43
but can you help me with this same answer without using `position: sticky`? here it is and its awesome http://stackoverflow.com/questions/40049285/how-to-prevent-get-over-other-divs — Shift 'n Tab, Oct 25 '16 at 04:55

How to set an element position to fixed inside its parent container

1 Answers1