mozilla
Your Search Results

    isolation

    Summary

    The isolation CSS property defines if the element must create a new stacking context.

    This especially useful in conjunction with background-blend-mode that only blend background in a given stacking context: it allows to isolate groups of elements from their deeper background and to blend their background color together.

    • Initial value auto
    • Applies to all elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements
    • Inherited no
    • Media visual
    • Computed value as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax:  auto | isolate
    isolation: auto;
    isolation: isolate;
    
    isolation: initial;
    isolation: inherit;
    isolation: unset;
    

    Values

    auto
    Is a keyword indicating that a new stacking context has to be created only if one properties applied to the element requires it.
    isolate
    Is a keyword indicating that a new stacking context must be created.

    Examples

    <div id="b" class="a">
      <div id="d">
        <div class="a c">auto</div>
      </div>
      <div id="e">
        <div class="a c">isolate</div>
      </div>
    </div>
    
    .a {
      background-color: rgb(0,255,0);
    }
    #b {
      width: 200px;
      height: 210px;
    }
    .c {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      padding: 2px;
      mix-blend-mode: difference;
    }
    #d {
      isolation: auto;
    }
    #e {
      isolation: isolate;
    }

    Specifications

    Specification Status Comment
    Compositing and blending Level 1
    The definition of 'Isolation' in that specification.
    Candidate Recommendation Initial specification.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support

    41.0

    36 (36) Not supported ? ?
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support

    41.0

    36.0 (36)[1] Not supported ? ?

    See also

    Document Tags and Contributors

    Contributors to this page: jpmedley, Sebastianz, teoli
    Last updated by: jpmedley,