What do CSS right initial and right auto do?

#css #html #webdev #beginners

Was doing code review today and saw some code that intrigued me.

.button {
    position: fixed;
    right: initial;
}

The right: initial was interesting I dug more into what initial does and found out it sets that attribute to what the browsers default settings is. There is a really good article on css tricks about this.

So what is the initial value for the right attribute? I did some investigating and found out that the default value is auto (for chrome at least). That confused me because I always used position: fixed and then just positioned it wherever I wanted with the left, right, top, bottom. I never thought about what would happen if the right attribute was auto (which is it by default). I set up a code pen to demonstrate. What is interesting is when you scroll.

MDN describes what the right attribute does very well here.

"When position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block."

When right: auto is set the browser will calculate what the right attribute needs to be set to so that the left side of the child element is right next to the left side of the parent element, because it is positioned fixed when you scroll you can scroll past the containing div but the positioning of the fixed element stays the same.

I hope that you learned something helpful alongside me today.