Isolation

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "isolation"; export const description = "Utilities for controlling whether an element should explicitly create a new stacking context.";

<ApiTable rows={[ ["isolate", "isolation: isolate;"], ["isolation-auto", "isolation: auto;"], ]} />

Examples

Basic example

Use the isolate and isolation-auto utilities to control whether an element should explicitly create a new stacking context:

<!-- [!code classes:isolate] -->
<div class="isolate ...">
  <!-- ... -->
</div>

Responsive design