Guidelines for positioning elements with banner awareness
Sign in to like and favorite skills
description: Guidelines for positioning elements with banner awareness globs:
When positioning elements with
stickyfixedabsolutetop-0top-banner-offsettop-0The application can display system banners (payment issues, maintenance notices, etc.) that push content down. Using
top-banner-offsetBad:
<div className="fixed top-0 left-0 right-0">...</div> <div className="sticky top-0">...</div> <div className="absolute top-0">...</div> <div className="pt-0">...</div>
Good:
<div className="fixed top-banner-offset left-0 right-0">...</div> <div className="sticky top-banner-offset">...</div> <div className="absolute top-banner-offset">...</div> <div className="pt-banner-offset">...</div>
h-screen-with-bannermin-h-screen-with-bannerpt-banner-offset--banner-height--banner-offsetweb/src/styles/globals.css--banner-heighttop-banner-offset