Sukarelawan kami masih belum menterjemah artikel ini ke bahasa Melayu. Sertai kami dan bantu melaksanakannya!
Anda juga boleh membaca artikel ini dalam bahasa English (US).

The isolation CSS property determines whether an element must create a new stacking context.

This property is especially helpful when used in conjunction with mix-blend-mode.

Syntax

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

The isolation property is specified as one of the keyword values listed below.

Values

auto
A new stacking context is created only if one of the properties applied to the element requires it.
isolate
A new stacking context must be created.

Formal syntax

auto | isolate

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 definition
Initial valueauto
Applies toAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
isolationChrome Full support 41Edge No support NoFirefox Full support 36IE No support NoOpera Full support 30Safari Full support 8WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 36Opera Android Full support 30Safari iOS Full support 8Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support

See also

Tag Dokumen dan Penyumbang

Terakhir dikemaskini oleh: Konrud,