Absolutely positioned button in scrolling container moves with scrolling - css

Question

I have a container with lots of content and hence I have set overflow: auto; to make it scrolling.
I also need a button in the bottom-right corner of this container at a fixed position (similar to a FAB button in Material Design).
The button is nicely placed in the bottom-right of the container. Unfortunately when I scroll the content, the button moves with it. My understanding of absolute positioning is that it will position the element relative to its parent (with position: relative;). So why is this button moving? What's the right way to fix it to the parent?
The expected behavior is that the button stays in the bottom-right corner regardless of the scroll position. For an example, see this page and search for the phrase "Animation of toolbar off-screen during scrolling".
Note that I am looking to make this work with absolute positioning, not fixed positioning. The button should be in bottom-right corner of its container, not matter how deeply the container is nested in the browser window.
* {
box-sizing: border-box;
}
.container {
position: relative;
overflow: auto;
height: 256px;
width: 256px;
margin-right: 16px;
border: solid 1px red;
padding: 4px;
}
.fab {
position: absolute;
right: 20px;
bottom: 20px;
color: white;
background-color: blue;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
<Button class="fab">
Ok
</Button>
</div>
Please see my JSFiddle here

Answer 1

There are many ways of achieving this, but I would prefer wrapping the .container with a .container-parent of the same height and width, and position: relative. This gives you a non-scrolling element to position the .fab button against.
<div class="container-parent">
<div class="container">
Lorem ipsum dolor sit amet...
</div>
<Button class="fab">
Ok
</Button>
</div>
With CSS:
.container-parent {
position: relative;
height: 256px;
width: 256px;
}
.fab {
position: absolute;
bottom: 20px;
right: 20px;
}
Here's the fiddle: http://jsfiddle.net/t702Lknz/4/
Alternatively, you could use your original markup, with .fab having a fixed position. The CSS would be like:
.fab {
position: fixed;
top: 225px;
left: 190px;
}
Here's the fiddle for that: http://jsfiddle.net/t702Lknz/3/

Answer 2

You can do this by adding a wrapper div for the text. The wrapper div will its width and height set to 100% and overflow set to auto, so it will have the scroll box and your FAB can be positioned within the outer div like so:
* {
box-sizing: border-box;
}
.fab {
position: absolute;
right: 20px;
bottom: 20px;
}
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
float: left;
margin-right: 16px;
}
.text-wrapper {
overflow: auto;
height: 100%;
width: 100%
}
<div class="container">
<div class="text-wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
quidem.
</div>
<Button class="fab">
Ok
</Button>
</div>

Answer 3

I finally figured out how to do this. Since only the text should scroll, it should be inside its own scrolling container. This makes the button latch on to its parent without being affected by the scrolling. Here's the final code.
* { box-sizing: border-box; }
.container {
/* keep the add button in a fixed location relative to this container */
position: relative;
display: flex;
flexDirection: column;
height: 200px;
width: 200px;
margin-right: 16px;
border: solid 1px red;
padding: 4px;
}
.text-container {
/* ensure that only the text scrolls, not the button */
flex: 1;
overflow: auto;
}
.fab {
position: absolute;
right: 20px;
bottom: 20px;
color: white;
background-color: blue;
}
<div class="container">
<div class="text-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>
<Button class="fab">
Ok
</Button>
</div>