The isolation property in CSS defines whether an element should create a new stacking context. It helps prevent the element from being affected by background elements with blending modes by placing it in its stack.
This property is typically applied to the parent element, ensuring that its children remain visually isolated from other elements, especially when blend modes are in use. By creating a separate stacking context, it enhances control over how elements are layered and displayed.
Syntax:
isolation: auto | isolate | initial | inherit;
Default Value: auto
Property Values
| Value | Description |
|---|
| auto | Creates a new stacking element only when necessary. Allows blending between elements. |
| isolate | Prevents blending and forces the creation of a new stacking element. |
| initial | Resets the isolation property to its default value (auto). |
| inherit | Inherits the isolation property from the parent element. |
CSS isolation Property Example
In this example, we use the isolation property in CSS. The first image shows how blending happens without isolation, while the second image is inside a container with isolation: isolate;. This prevents the image from blending with the background, helping to show how isolation changes the way elements are layered and displayed.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS isolation Property
</title>
<style>
.container {
text-align: center;
background-color: green;
width: 400px;
margin: auto;
}
.blend {
width: 200px;
height: 200px;
mix-blend-mode: difference;
}
.isolate_enable {
isolation: isolate;
}
</style>
</head>
<body>
<div class="container">
<h3>Image without isolation</h3>
<img class="blend" src=
"https://media.geeksforgeeks.org/wp-content/uploads/blank.png">
<div class="isolate_enable">
<h3>Image with isolation</h3>
<img class="blend" src=
"https://media.geeksforgeeks.org/wp-content/uploads/blank.png">
</div>
</div>
</body>
</html>
Output:
Use Cases for the CSS Isolation Property
- Managing Complex Layered Designs: Use isolation: isolate; to keep elements visually separate when layering multiple backgrounds, images, or content in a design.
- Preventing Blending Effects: When using mix-blend-mode, applying isolation: isolate; ensures that elements don’t blend with their parent or background, preserving intended visual effects.
- Avoiding z-index Conflicts: In designs where multiple elements have different z-index values, the isolation property can create independent stacking contexts to prevent layering issues.
- Keeping Elements Independent: If you want certain elements to behave independently of their surrounding content, especially in interactive or dynamic layouts, isolation: isolate; can help maintain clear visual boundaries.
- Customizing Parent-Child Relationships: Use isolation: inherit; to pass the isolation behavior from a parent element to its children, ensuring consistent stacking and blending behaviors across nested elements.
Supported Browsers
The browser supported by isolation property are listed below:
- Google Chrome 41.0
- Edge 79.0
- Firefox 36.0
- Safari 8.0
- Opera 30.0
Note: The isolation property is not supported by Internet Explorer, so blending and stacking behavior may not work as expected in that browser.