useOverlayStacking

To stack overlays correctly on top of each other, use the useOverlayStacking hook. The hook returns the styles you need to ensure a correct stacking order. Applying the returned styles to the container, its position will be fixed.

Import

import { useOverlayStacking } from '@dynatrace/strato-components-preview/core';

Use cases

CodeSandbox

Nest overlays

Use the OverlayStackingProvider to nest overlays. The provider is increasing the nesting level whenever a new overlay is opened. Doing this, nested overlays will be rendered on top of the parent overlay again.

CodeSandbox

Offset overlays

As the first argument, you can pass an offset to the hook that will be used as the top offset in the returned styles, allowing you to adjust the containers position.

CodeSandbox