Trying to make an element "float" between two other elements using the `position : sticky` attribute.
Not achieving the desired effect and unable to determine why.
The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. View a visual representation of the desired outcome here
.page {
background-color : grey;
height : 1000px;
position : relative;
}
.container {
background-color : red;
position : absolute;
top : 35%;
height : 300px;
}
.upper {
height : 50px;
}
.copy {
position : sticky;
bottom : 0px;
}
.lower {
height : 50px;
position : absolute;
bottom : 0px;
}<div class="page">
<div class="container">
<div class="upper">
<h1 class="hero">This is the title</h1>
</div>
<div class="copy">This should float between the upper and lower div</div>
<div class="lower">
<button class="cta">This is a CTA</button>
</div>
</div>
</div>