PrincipleOfAttachment
The Principle of Attachment tells you how to distinguish between fixed and movable UI elements. UI elements that cannot move relative to their parent should appear recessed, while those that are transient, movable, or, dismissible should appear to float over their parent.
To emphasize that content is scrollable, the scroll container can be recessed.
Apple's early OSX versions were a paragon of this principle. Notice how the window, which can move relative to the desktop, has an outer drop shadow that makes it appear to "float" above the desktop. The search input and header buttons, on the other hand, cannot be moved, resized, or dismissed, and accordingly appear to be engraved into the brushed metal of the window border. The folder icons, which are draggable, are also given a subtle drop shadow.
At first glance, the shadow under the (fixed) menu bar appears to be a violation of this principle. However, it serves an important purpose: by placing the menu bar on the same visual plane as the window, it makes it clear that the window cannot be dragged over the menu bar—instead, the two objects collide so that the menu bar is always visible.
Another example: these cards make it clear that the content is not attached to the map (the map can scroll and zoom behind the cards). Example from https://material.io/components/cards#behavior
Here, Google inappropriately makes the search bar appear to float over the background. The search bar can't be moved, dismissed, or resized, so why is it floating? (it's probably because that makes more people click it)
