isolation

The isolation CSS property specifies the stacking context.

Syntax

CSS

isolation: value;

JS

object.style.isolation = "value";

Values

<'isolation'> = <isolation-mode>

<isolation-mode> = auto | isolate

auto

Automatically specified by the user agent.

isolate

Turns the element into a stacking context.

Initial

auto

Examples

1 · auto

2 · isolate

3 · JS · Inline

4 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        .myclass1
        {
            background-image: url(/assets/svg/HappyFace.svg);
        }
        .myclass2
        {
            background-color: yellow;
            mix-blend-mode: difference;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button>isolate</button>
    <div class="myclass1">
        <div class="myclass2">isolation</div>
        <div class="myclass2">isolation</div>
        <div class="myclass3">
            <div class="myclass2">isolation</div>
        </div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".myclass3").style.isolation = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
        }
    </script>
</body>
</html>

Links

Properties

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timeline

animation-timing-function

backdrop-filter

backface-visibility

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-start-end-radius

border-start-start-radius

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

box-decoration-break

column-rule-color

column-rule-style

column-rule-width

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

content-visibility

counter-increment

font-feature-settings

font-optical-sizing

font-size-adjust

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

forced-color-adjust

grid-auto-columns

grid-column-end

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

image-rendering

initial-letter-align

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

justify-content

list-style-image

list-style-position

list-style-type

margin-block-end

margin-block-start

margin-inline-end

margin-inline-start

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

max-inline-size

min-inline-size

object-position

overflow-clip-margin

overflow-inline

padding-block-end

padding-block-start

padding-inline-end

padding-inline-start

perspective-origin

print-color-adjust

scroll-behavior

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-orientation

text-underline-offset

text-underline-position

transform-origin

transform-style

transition-delay

transition-duration

transition-property

transition-timing-function

External

World Wide Web Consortium (W3C)

Home