W3docs
de
Anmelden

CSS isolation-Eigenschaft

Use isolation property which allows to create a new stacking context. Learn about property values and see examples.

Die isolation-Eigenschaft ermöglicht es Ihnen, einen neuen Stapelkontext zu erstellen. Sie wird häufig zusammen mit der mix-blend-mode-Eigenschaft verwendet.

Bei der Verwendung von background-blend-mode ist die isolation-Eigenschaft nicht erforderlich, da Hintergrundebenen nur miteinander und nicht mit dem dahinterliegenden Seiteninhalt verschmelzen.

info

In CSS wird die isolation-Eigenschaft hauptsächlich verwendet, um mix-blend-mode- oder filter-Effekte zu isolieren und zu verhindern, dass sie übergeordnete oder untergeordnete Stapelkontexte beeinflussen.

Initial Valueauto
Applies toAll elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM SyntaxObject.style.isolation = "isolate";

Syntax

CSS-Syntax für isolation

isolation: auto | isolate | initial | inherit;

Beispiel für die isolation-Eigenschaft:

CSS-Codebeispiel für isolation

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        background-color: #ccc;
      }
      #isolation-example {
        width: 300px;
        height: 300px;
      }
      .c {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        padding: 10px;
        mix-blend-mode: difference;
      }
      #isolation-example1 {
        isolation: auto;
      }
      #isolation-example2 {
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div id="isolation-example" class="a">
      <div id="isolation-example1">
        <div class="a c">isolation: auto;</div>
      </div>
      <div id="isolation-example2">
        <div class="a c">isolation: isolate;</div>
      </div>
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS isolation another

Beispiel für die isolation-Eigenschaft in Kombination mit der mix-blend-mode-Eigenschaft:

Weiteres CSS-Codebeispiel für isolation

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #eee;
        color: #555;
        font-size: 1.1em;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .isolation-example {
        margin: 1em auto;
        width: 100%;
        max-width: 814px;
        position: relative;
      }
      img {
        width: 100%;
      }
      .isolation-example h1 {
        position: absolute;
        top: 5em;
        color: white;
        text-align: center;
        font-size: 40px;
        width: 100%;
        text-transform: uppercase;
        background-color: #000;
        padding: .5em .25em;
        mix-blend-mode: overlay;
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div class="isolation-example">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree." />
      <div class="element">
        <h1>House</h1>
      </div>
    </div>
  </body>
</html>
Probier es selbst »

Werte

ValueDescription
autoEs wird kein neuer Stapelkontext erstellt, es sei denn, andere Eigenschaften (wie mix-blend-mode oder filter) erfordern einen. Dies ist der Standardwert.
isolateErstellt einen Stapelkontext für ein Element und isoliert die Gruppe.
initialLegt fest, dass die Eigenschaft ihren Standardwert verwendet.
inheritErbt die Eigenschaft vom Elternelement.

Praxis

Übung

Was bewirkt die 'isolation'-Eigenschaft in CSS?