Global layer
Use global layers to keep navigation, modals, and notifications in a consistent order.
Layer (z-index) controls the stacking order of UI elements. It determines which components appear above or below others on the screen.
Use global layers to keep navigation, modals, and notifications in a consistent order.
Use local layers so dropdowns, tooltips, and popovers stay within their parent context.
Show layers from highest to lowest z-index. Users see the top of the stack first.
Layers are shown from highest to lowest z-index — the top of each stack is what your user sees first. The scale runs from base (0) through raised (100), floating (400), overlay (800), up to modal (1600).
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.