HTML - DOM Style Object isolation Property

Quiz

HTML DOM Style Object isolation property specifies whether an element must create a new stacking content.

Syntax

Set the isolation property:

object.style.isolation= "auto | isolate | initial | inherit";

Get the isolation property:

object.style.isolation;

Property Values

Value	Description
auto	It is the default values which creates a new stacking only if one of the properties applied to the element requires to create one.
isolate	It specifies a new stacking context must be created.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns stacking context of an element.

Example of HTML DOM Style Object 'isolation' Property

The following example illustrates isolate property on div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object isolation Property
    </title>
    <style>
        .a {
            background-color: #04af2f;
        }
        #b {
            width: 400px;
            height: 400px;
        }
        .c {
            width: 150px;
            height: 150px;
            border: 2px solid rgb(100, 94, 94);
            padding: 4px;
            mix-blend-mode: screen;
        }
        #iso {
            isolation: auto;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Isolate</button>
    <br>
    <br>
    <div id="b" class="a">
        <div id="iso">
            <div class="a c">Inside</div>
        </div>
    </div>
    <script>
        function fun() {
            document.getElementById("iso")
                .style.isolation = "isolate";
        }
    </script>
</body>
</html>

Supported Browsers

Property
isolation	Yes 41	Yes 79	Yes 36	Yes 8	Yes 40

html_dom.htm

Print Page