isolation

isolation CSS 속성은 요소가 새로운 쌓임 맥락을 생성해야 하는지 지정합니다.

mix-blend-mode와 함께 사용했을 때 특히 유용합니다.

구문

/* 키워드 값 */
isolation: auto;
isolation: isolate;

/* 전역 값 */
isolation: inherit;
isolation: initial;
isolation: unset;

isolation 속성은 다음 키워드 값 중 하나를 사용해 지정합니다.

auto
요소에 적용한 속성 중 새로운 쌓임 맥락을 요구하는 속성이 있을 때만 쌓임 맥락을 생성합니다.
isolate
항상 새로운 쌓임 맥락을 생성합니다.

형식 구문

auto | isolate

예제

<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;
}

명세

Specification Status Comment
Compositing and Blending Level 1
The definition of 'Isolation' in that specification.
Candidate Recommendation Initial definition
초기값auto
적용대상All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
상속no
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

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

같이 보기