CSS - isolation Property

Quiz

CSS isolation property is used to control how an element's content interacts with its parent and sibling elements in terms of rendering and stacking context. It essentially determines whether an element establishes a new stacking context or not.

Syntax

isolation: auto | isolate | initial | inherit;

Property Values

Value	Description
auto	It indicates that the element's content does not create a new stacking context. Instead, it inherits the stacking context of its parent. Default.
isolate	This value indicates that the element creates a new stacking context, isolating its content from the rest of the document. This means that the element's content will be rendered independently of its siblings and parent elements.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Isolation Property

The following examples explain the isolation property with different values.

Isolation Property with Auto Value

The following example demonstrates the auto value of the isolation property which does not create a new stacking context. The mix-blend-mode: difference subtracts the top color from the bottom color and creating in a high-contrast effect.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: yellow;
         width: 250px;
         height: 200px;
         padding: 5px;
      }
      .box2 {
         width: 130px;
         height: 130px;
         border: 5px solid red;
         padding: 5px;
         mix-blend-mode: difference;
         margin-left: 50px;
      }
      .box1 {
         isolation: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS isolation Property
   </h2>
   <h4>
      isolation: auto
   </h4>
   <div  class="container">
      <div class="box1">
         <h3 class="container box2">
            isolation: auto;
         </h3>
      </div>
   </div>
</body>
</html>

Isolation Property with Isolate Value

The following example demonstrates the isolate value of the isolation property that creates a new stacking context for box1, preventing the box1 from blending with external elements and the blend mode applied to box2 doesn't impact elements inside box1. The mix-blend-mode: difference property subtracts the top color from the bottom color and creating high-contrast effect.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: yellow;
         width: 250px;
         height: 200px;
         padding: 5px;
      }
      .box2 {
         width: 130px;
         height: 130px;
         border: 5px solid red;
         padding: 5px;
         mix-blend-mode: difference;
         margin-left: 50px;
      }
      .box1 {
         isolation: isolate;
      }
   </style>
</head>
<body>
   <h2>
      CSS isolation Property
   </h2>
   <h4>
      isolation: isolate
   </h4>
   <div  class="container">
      <div class="box1">
         <h3 class="container box2">
            isolation: isolate;
         </h3>
      </div>
   </div>
</body>
</html>

Supported Browsers

Property
isolation	41.0	79.0	36.0	8.0	30.0

css_reference.htm

Print Page