Learning jQuery 3 - Fifth Edition

Positioning with CSS

When working with .animate(), it's important to keep in mind the limitations that CSS imposes on the elements that we wish to change. For example, adjusting the left property will have no effect on the matching elements unless those elements have their CSS position set to relative or absolute. The default CSS position for all block-level elements is static, which accurately describes how those elements will remain if we try to move them without first changing their position value.

For more information on absolute and relative positioning, see CSS Tricks: https://css-tricks.com/almanac/properties/p/position/.

In our stylesheet, we could set <div id="switcher"> to be relatively positioned:

#switcher {  position: relative; ...