position: sticky; bottom: 0 anchors to parent padding instead of visual bottom
When building a scrollable sheet component with padding and a sticky footer bar, setting position: sticky; bottom: 0 on the footer anchors it to the inner edge of the parent's padding, not the visual bottom. In a mobile thank-you sheet with 500 characters of editable text, the 'Looks good' button became unreachable without scrolling because the note scrolled underneath it. The button's position never changed as the user scrolled, but the anchor point was wrong.
The sticky element anchors at bottom: 0 within the padding box. To reach the visual bottom edge, use a negative bottom offset matching the parent padding: bottom: -18px when padding is 18px. Add a ::before pseudo-element with a gradient fade (pointer-events: none) so content doesn't appear illegible under the bar. Give the bar itself a solid background (not transparent) and sufficient z-index so scrolling content doesn't appear on top of it. This pattern works for any sticky footer inside a padded overflow container.