CSS - isolation（隔离）属性_CSS 菜鸟教程

CSS isolation 属性用于控制元素的内容在呈现和堆叠上下文方面如何与其父元素和同级元素交互。它本质上决定了一个元素是否建立了一个新的堆叠上下文。

可能的值

auto − 这是默认值。它指示元素的内容不会创建新的堆叠上下文。相反，它继承了其父级的堆叠上下文。
isolate - 此值表示元素创建新的堆叠上下文，将其内容与文档的其余部分隔离开来。这意味着元素的内容将独立于其同级元素和父元素进行呈现。

适用于

所有元素。在 SVG 中，它适用于容器元素、图形元素和图形引用元素。

语法

 isolation: auto | isolate;

CSS isolation - 自动值

以下示例演示了创建新的堆叠上下文的 isolation： auto 属性。混合混合模式：差异从底部颜色中减去顶部颜色，并产生高对比度效果 -

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: yellow;
	 	 	 width: 250px;
	 	 	 height: 200px;
	 	 	 padding: 5px;
	 	}
	 	.box2 {
	 	 	 width: 130px;
	 	 	 height: 130px;
	 	 	 border: 5px solid red;
	 	 	 padding: 5px;
	 	 	 mix-blend-mode: difference;
	 	 	 margin-left: 50px;
	 	}
	 	.box1 {
	 	 	 isolation: auto;
	 	}
</style>
</head>
<body>
	 	<div 	class="container">
	 	 	 <div class="box1">
	 	 	 	 	<h3 class="container box2">isolation: auto;</h3>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS isolation - 隔离值

以下示例演示了 isolation： isolate 属性，该属性为 box1 创建新的堆叠上下文，防止 box1 与外部元素混合，并且应用于 box2 的混合模式不会影响 box1 内部的元素 -

mix-blend-mode： difference 属性从底部颜色中减去顶部颜色，并创建高对比度效果。

<html>
<head>
<style>
	 	.container {
	 	 	 background-color: yellow;
	 	 	 width: 250px;
	 	 	 height: 200px;
	 	 	 padding: 5px;
	 	}
	 	.box2 {
	 	 	 width: 130px;
	 	 	 height: 130px;
	 	 	 border: 5px solid red;
	 	 	 padding: 5px;
	 	 	 mix-blend-mode: difference;
	 	 	 margin-left: 50px;
	 	}
	 	.box1 {
	 	 	 isolation: isolate;
	 	}
</style>
</head>
<body>
	 	<div 	class="container">
	 	 	 <div class="box1">
	 	 	 	 	<h3 class="container box2">isolation: isolate;</h3>
	 	 	 </div>
	 	</div>
</body>
</html>

<< CSS - inset（插图）属性 CSS - overscroll-behavior （滚动）属性 >>