I am facing a challenge where I have a button nested inside a section that needs to maintain a fixed position within the parent container ('.container') while scrolling through the page. The catch is that the section itself does not scroll and can vary in height. How can I achieve this for the 'a.button-primary' element?
<body>
<header class="section page-header">
</header>
<section class="breadcrumbs-custom-inset">
</section>
<section class="section section-sm bg-default">
<div class="container">
<a class="button-primary button" href="">
<span class="icon fa fa-plus"></span>
Add New Item
</a>
<div class="row-sm row-40 row-md-50 justify-content-center">
<!--List of Items-->
</div>
</div>
</section>
</body>
I attempted using Sticky Position but encountered issues with it. I also experimented with fixed positioning, but it anchored the button based on the window rather than the '.container'.
Below is the CSS I applied:
.container{
position: relative
}
.button{
position: sticky;
top: 0;
right: 0;
}
This solution worked when I added
height: 100px; overflow-y: scroll