isolation
CSS 속성은 요소가 새로운 쌓임 맥락을 생성해야 하는지 지정합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 |
Computed value | as specified |
Animation type | discrete |
브라우저 호환성
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.