Fixed position inside scrolling div

Question

I have a div with let's say a height on 400px. The content is much longer, so the div can scroll (y-axis). In the right side of the div, I need some buttons to have a fixed position inside that div.

How would I do that? jQuery, CSS, whatever - I don't mind.

I tried fixTo - but doesn't seem to work for this - and a CSS solution that says "use position:fixed, but no left/right - just margin". It works OK, but if the page itself scrolles, the buttons scrolls too - which they shouldn't. They should stay fixed inside the div at all time.

Example code:

<div class="container" style="width: 960px; height: 400px; position: relative;">
    <div class="buttons needToBeFixed"></div>
    <div class="aLotOfContent" style="width: 2000px;"></div>
</div>

Answer 1

You need to have the button positioned absolute inside of the container.

Snippest:

.container {
    width: 250px;
    outline: 1px solid blue;
    width: 300px; 
    height: 150px; 
    position: relative;
}

.container .aLotOfContent {
    width: 300px;
    height: 150px;
    overflow: auto;
    background: #e3ecfc;
}

.container .fixed{
    width: 60px;
    height: 40px;
    background-color: #e52727;
    color: white;
    position: absolute;
    right: 40px;
    bottom: 20px;
}

html, body{
    height: 400px;
}

<div class="container">

 <button class="fixed"> im fixed! </button>

 <div class="aLotOfContent">
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
 </div>
    
</div>