CSS - isolation

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.

Possible Values

  • auto − This is the default value. It indicates that the element's content does not create a new stacking context. Instead, it inherits the stacking context of its parent.

  • 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.

Applies To

All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.

Syntax

isolation: auto | isolate;

CSS isolation - auto Value

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

<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>
   <div  class="container">
      <div class="box1">
         <h3 class="container box2">isolation: auto;</h3>
      </div>
   </div>
</body>
</html>

CSS isolation - isolate Value

The following example demonstrates the isolation: isolate 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.

<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>
   <div  class="container">
      <div class="box1">
         <h3 class="container box2">isolation: isolate;</h3>
      </div>
   </div>
</body>
</html>
Advertisements