I need to position a div absolutely in the center of the screen and have it appear in front of another div. However, when the user scrolls down and the div reaches the footer, it should stop floating and be positioned just above the footer. I've included some example code below that isn't working as intended:
.main {
background: blue;
height: 2000px;
}
.footer {
background: red;
height: 400px;
}
.float {
background: green;
position:fixed;
height: 30px;
width: 100px;
bottom: 50px;
left: 300px;
}<div class="main">Main</div>
<div class="float">Button</div>
<div class="footer">Footer</div>Below are images illustrating how I expect the element to behave:
Positioned just over the main: https://i.sstatic.net/91Xhg.png
The desired state when it reaches the footer: https://i.sstatic.net/KjeQQ.png
An ideal solution using only CSS is preferred.