Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS isolation Property

The isolation property in CSS is known for determining whether an element should create a new stacking context or not. This property is especially used when it is in conjunction with the mix-blend-mode and z-index.

This property may be specified as one of the keyword values like auto and isolate. In the case of the auto value, a new stacking context gets created only in case one of the properties applied to the element requires it and in the case of the isolation property, a new stacking context has to be created.

Syntax

isolation: auto|isolate|initial|inherit;

Example: CSS isolation Property

Here in the example below, we are using the isolation property to stack a container block among many blocks. We have given the isolation property value as auto and isolate. This means one of the blocks gets the default value of this property and the other block gets stacked or isolated according to the values specified by us.

<!DOCTYPE html>
<html>
<head>
	<title>The isolation property in CSS</title>
	<style type="text/css">
		.a {
	  background-color: rgb(25, 50, 3);
	}
	#b {
	  width: 200px;
	  height: 210px;
	}
	.c {
	  width: 100px;
	  height: 100px;
	  border: 1px solid black;
	  padding: 2px;
	  mix-blend-mode: difference;
	}
	#d {
	  isolation: auto;
	  color: white;
	}
	#e {
	  isolation: isolate;
	}
	</style>
</head>
<body>
	<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>
</body>
</html>

Output

Example 2: CSS isolation Property

In the second example below, we have given the isolation property value as an isolate. This means a part of the whole container block gets isolated as per the values specified by us.

<!DOCTYPE html>
<html>
<head>
	<title>The isolation property in CSS</title>
	<style type="text/css">
		.a {
	  background-color: rgb(25, 5, 30);
	}
	#b {
	  width: 210px;
	  height: 210px;
	}
	.c {
	  width: 100px;
	  height: 100px;
	  border: 1px solid white;
	  padding: 2px;
	  mix-blend-mode: difference;
	}	
	#e {
	  isolation: isolate;
	  color: white;
	}
	</style>
</head>
<body>
	<div id="b" class="a">
		<div id="e">
			<div class="a c">isolate</div>
		</div>
	</div>
</body>
</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term browser compatibility indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 41 41
Edge 79 79
Firefox 36 36
Internet Explorer no no
Opera 30 30
Safari 8 8
Webview Android 41 41
Chrome Android 41 41
Firefox Android 36 36
Opera Android 30 30
IOS Safari 8 8
Samsung Internet 4.0 4.0

Conclusion

This property is applicable to all the elements and in SVG, it is applicable to the container elements, and also the graphic referencing elements. It is not an inherited property. The computed value for this property is the as specified one.