Trying to figure out the semantics behind why this works.

In this admin dashboard there's a settings button that is fixed to the right side of the UI.

https://www.akveo.com/ngx-admin/pages/layout/stepper

If we click the settings button the settings panel expands and this moves the button.

However if we look at the right css position (With the developer tools) it is still set to 0 after the button is moved.

Just curious how this works? My understanding is the fixed positioning works relative to the viewport, so I was expecting the button to stay in place and the panel to cover it ...

CodePudding user response：

when the button is clicked, a class called 'expanded' gets added to the 'ngx-toggle-settings-button element'

this 'expanded' class contains the rule 'transform: translateX(-16rem);' which moves the element and the button inside 16rem units in the negative x-axis