isolation
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính CSS isolation xác định liệu một phần tử có phải tạo một stacking context mới hay không.
Try it
isolation: auto;
isolation: isolate;
<section class="default-example" id="default-example">
<div class="background-container">
<div id="example-element">
<img src="/shared-assets/images/examples/firefox-logo.svg" />
<p><code>mix-blend-mode: multiply;</code></p>
</div>
</div>
</section>
.background-container {
background-color: #f4f460;
width: 250px;
}
#example-element {
border: 1px solid black;
margin: 2em;
}
#example-element * {
mix-blend-mode: multiply;
color: #8245a3;
}
Thuộc tính này đặc biệt hữu ích khi dùng kết hợp với mix-blend-mode và z-index.
Cú pháp
css
/* Giá trị từ khóa */
isolation: auto;
isolation: isolate;
/* Giá trị toàn cục */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;
Thuộc tính isolation được chỉ định là một trong các giá trị từ khóa liệt kê bên dưới.
Giá trị
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Cú pháp hình thức
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
Ví dụ
Buộc tạo stacking context mới cho phần tử
HTML
html
<div class="big-square">
<div class="isolation-auto">
<div class="small-square">auto</div>
</div>
<div class="isolation-isolate">
<div class="small-square">isolate</div>
</div>
</div>
CSS
css
.isolation-auto {
isolation: auto;
}
.isolation-isolate {
isolation: isolate;
}
.big-square {
background-color: lime;
width: 200px;
height: 210px;
}
.small-square {
background-color: lime;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px;
mix-blend-mode: difference;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| Compositing and Blending Module Level 2 # isolation |