X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS isolation Property

The isolation property allows to create a new stacking context. It can be used with the mix-blend-mode property.

When the background-blend-mode is used the isolation property is not needed. Background elements do not blend with the content which is behind them because these elements are isolated in their nature.

The isolation property can also seem invalid when used with the translate value of the transform property on the same element. You can have such difficulty if you try to center an element both horizontally and vertically with the translate value and the absolute value of the position property together.

In CSS, a background-image or the content of an <img> must always be rendered into an isolated group.

Initial Value auto
Applies to All elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax Object.style.isolation = "isolate";

Syntax

isolation: auto | isolate | initial | inherit;

Example of the isolation property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
      background-color: #ccc;
      }
      #isolation-example {
      width: 300px;
      height: 300px;
      }
      .c {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      padding: 10px;
      mix-blend-mode: difference;
      }
      #isolation-example1 {
      isolation: auto;
      }
      #isolation-example2 {
      isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div id="isolation-example" class="a">
      <div id="isolation-example1">
        <div class="a c">isolation: auto;</div>
      </div>
      <div id="isolation-example2">
        <div class="a c">isolation: isolate;</div>
      </div>
    </div>
  </body>
</html>

Example of the isolation property with a black isolated part:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
      box-sizing: border-box;
      }
      body {
      background-color: #eee;
      color: #555;
      font-size: 1.1em;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .isolation-example {
      margin: 1em auto;
      width: 100%;
      max-width: 814px;
      position: relative;
      }
      img {
      width: 100%;
      }
      .isolation-example h1 {
      position: absolute;
      top: 5em;
      color: white;
      text-align: center;
      font-size: 40px;
      width: 100%;
      text-transform: uppercase;
      background-color: #000;
      padding: .5em .25em;
      mix-blend-mode: overlay;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div class="isolation-example">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree.">
      <div class="element">
        <h1>House</h1>
      </div>
    </div>
  </body>
</html>

Values

Value Description
auto Even if the property is set to auto, a stacking context is created in case background-blend-mode and mix-blend-mode are applied to the element. This is the default value of this property.
isolate Creates a stacking context on an element, and isolates the group.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

41.0+ x 36.0+ v 30.0+

Practice Your Knowledge

Which statement is incorrect about the isolation property?



Do you find this helpful?

Related articles