Kevin Powell - Community•3y ago

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);
}

2 Replies

theoriginalandrew•3y ago

position: fixed doesn't care about the parent, it gets hoisted out of the stack and placed at the position relative to the page itself rather than the parent. you should use position: absolute or position: sticky instead. docs: Fixed vs Sticky: https://www.kevinpowell.co/article/positition-fixed-vs-sticky/ Positioning docs: https://www.w3schools.com/css/css_positioning.asp

Position fixed vs position sticky | Position fixed vs position sticky

A look at the similarities and differences between CSS's position fixed and sticky, as well as when you might use one over the other

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

ÆvieOP•3y ago

thank you ❤️ I was not aware that of these differences

Gaming

Programming

CSS Position Fixed Issue