isolation

Definition

The isolation property specifies whether an element should create a new stacking context. A stacking context is a three-dimensional conceptualization of how elements are positioned and displayed on top of each other in the browser. By default, elements do not create a new stacking context, which means they will be positioned and displayed according to their document order. However, by setting the isolation property to isolate, an element will create a new stacking context, and its descendants will be isolated from the rest of the page.

Examples

This example sets the isolation property of all img elements to isolate, which means they will create a new stacking context. This can be useful when an image needs to be positioned and displayed independently of the surrounding content:

img {
  isolation: isolate;
}

This example sets the isolation property of all section elements to isolate, which means they will create a new stacking context. This can be useful when a section needs to be positioned and displayed independently of the surrounding content:

section {
  isolation: isolate;
}

This example sets the isolation property of all img elements to isolate, but then sets the isolation property of their parent element to revert. This means that the img elements will create a new stacking context, but their parent element will not. This can be useful when you want to isolate certain elements, but still allow them to be positioned and displayed relative to their parent:

img {
  isolation: isolate;
}
.parent {
  isolation: revert;
}

Values

Best Practices

• Use isolate sparingly. Creating a new stacking context can have unintended consequences for the layout and positioning of other elements on the page, so it's important to use isolate only when necessary.
• Avoid using isolate on elements with large numbers of descendants. Creating a new stacking context can have performance implications, particularly if the element has a large number of descendants.
• Be aware of the implications of isolate on scrollbars. When an element creates a new stacking context, its scrollbar will be isolated from the rest of the page, which can create a jarring visual effect when scrolling.
• Use revert to undo isolation on specific elements. This can be useful when you want to isolate certain elements, but still allow them to position and display relative to their parent element.
• Test your layout with and without isolate to see the effect it has on the stacking context of your page. This can help you identify any unintended consequences of using the isolation property.

Browser Compatibility