CSS Position Fixed Issue
Hi, my button for some reason won't stay fixed to the div its inside, even though I have "position: relative;" on my content div. Why is this happening?
<div class="content">
<div class="entries"></div>
<button class="entry-button"><img id="pen" src="icons/pen-to-square-solid.svg" alt=""></button>
</div><div class="content">
<div class="entries"></div>
<button class="entry-button"><img id="pen" src="icons/pen-to-square-solid.svg" alt=""></button>
</div>.content
{
background-color: var(--white);
min-width: 40rem;
height: 44rem;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
overflow: hidden;
overflow-y: scroll;
position: relative;
}
.entry-button
{
position: fixed;
height: 3rem;
width: 3rem;
right: 0;
bottom: 0;
margin: 5rem;
border: 1px solid var(--light-blue);
border-radius: .8rem;
background-color: var(--light-blue);
box-shadow: 0 5px 5px 0px rgba(0, 0, 0, .4);
}.content
{
background-color: var(--white);
min-width: 40rem;
height: 44rem;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
overflow: hidden;
overflow-y: scroll;
position: relative;
}
.entry-button
{
position: fixed;
height: 3rem;
width: 3rem;
right: 0;
bottom: 0;
margin: 5rem;
border: 1px solid var(--light-blue);
border-radius: .8rem;
background-color: var(--light-blue);
box-shadow: 0 5px 5px 0px rgba(0, 0, 0, .4);
}
