Javascript DOM CSS Style isolation Property

Introduction

Create a new stacking context for the element with id="d":

document.getElementById("d").style.isolation = "isolate";

Click the button to change the isolation property for the div "d".

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
.a {//w  w  w.  ja v  a 2 s.c  o m
  background-color: #EEEEEE;
}
#b {
  width: 250px;
  height: 250px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>
<div id="b" class="a">
  <div id="d">
  <div class="a c">div d</div>
  </div>
</div>

<script>
function myFunction() {
  document.getElementById("d").style.isolation = "isolate";
}
</script>
</body>
</html>

The isolation property defines whether an element must create a new stacking content.

Property Values

Value	Description
auto	`Default`. A new stacking context is created if one of the properties applied to the element requires it
isolate	A new stacking context must be created
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Previous Next