Learn about the z-index values being used, which play an important part in how our components overlay and interact with one another.

Overview #

Several Halfmoon components and helpers utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Halfmoon that's been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There's no reason we couldn't have used 100+ or 500+.

We don't encourage customization of these individual values; should you change one, you likely need to change them all.

Component/Helper CSS value
Dropdown z-index: 1000
Sticky z-index: 1020
Fixed z-index: 1030
Offcanvas backdrop z-index: 1040
Offcanvas z-index: 1045
Modal backdrop z-index: 1050
Modal z-index: 1055
Popover z-index: 1070
Tooltip z-index: 1080
Toast z-index: 1090

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.

Up next

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.