CSS isolation Property

In CSS, the isolation property specifies whether an element must create new stacking content. By creating a different stack element, it prevents an element from acquiring mix-blend-mode from elements in the backdrop.

Syntax

isolation: auto | isolate | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .bg {
        background-color: lightgreen;
    }
    .box {
        width: 200px;
        height: 200px;
    }
    .inner-box {
        width: 75px;
        height: 75px;
        border: 1px solid #212b36;
        padding: 5px;
        mix-blend-mode: difference;
    }
    .auto {
        isolation: auto;
    }
    .isolate {
        isolation: isolate;
    }
</style>
</head>
<body>

<div class="bg box">
    <div class="auto">
        <div class="bg inner-box">isolation: auto;</div>
    </div>
    <div class="isolate">
        <div class="bg inner-box">isolation: isolate;</div>
    </div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
auto	Default. Only if one of the properties applied to the element requires it is a new stacking context created.
isolate	It is necessary to create a new stacking context.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
isolation	41.0	36.0	Yes	79.0	30.0

@import

justify-content

CSS isolation Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us