--- title: isolation slug: Web/CSS/isolation translation_of: Web/CSS/isolation --- <div>{{CSSRef}}</div> <p>A propriedade CSS <strong><code>isolation</code></strong> define se o elemento deve criar um novo {{glossary("stacking context")}}.</p> <pre class="brush:css no-line-numbers">/* Keyword values */ isolation: auto; isolation: isolate; /* Global values */ isolation: inherit; isolation: initial; isolation: unset; </pre> <p>É especialmente útil em conjunto com {{cssxref("background-blend-mode")}} que mistura os fundos em um dado stacking context: ela permite isolar grupos de elementos dos seus fundos e misturar as suas cores.</p> <p>{{cssinfo}}</p> <h2 id="Sintaxe">Sintaxe</h2> <p>Uma das palavras-chave listadas abaixo.</p> <h3 id="Valores">Valores</h3> <dl> <dt><code>auto</code></dt> <dd>É uma palavra-chave indicando que um novo stacking context deve ser criado somente se uma das propriedades aplicadas ao elemento requererem.</dd> <dt><code>isolate</code></dt> <dd>É uma palavra-chave indicando que um novo stacking context deve ser criado.</dd> </dl> <h3 id="Sintaxe_formal">Sintaxe formal</h3> {{csssyntax}} <h2 id="Exemplos">Exemplos</h2> <pre class="brush: html"><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> </pre> <pre class="brush: css">.a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; }</pre> <p>{{ EmbedLiveSample('Examples', "230", "230") }}</p> <h2 id="Especificações">Especificações</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{ SpecName('Compositing', '#isolation', 'Isolation') }}</td> <td>{{ Spec2('Compositing') }}</td> <td>Initial definition</td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> <p>{{CompatibilityTable()}}</p> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td> <p class="p1">{{CompatChrome(41.0)}}</p> </td> <td>{{CompatGeckoDesktop('36')}}</td> <td>{{CompatNo()}}</td> <td>30</td> <td>7.1</td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td> <p class="p1">{{CompatChrome(41.0)}}</p> </td> <td>{{CompatGeckoMobile('36')}}</td> <td>{{CompatNo()}}</td> <td>36</td> <td>8.0</td> </tr> </tbody> </table> </div> <h2 id="Veja_também">Veja também</h2> <ul> <li>{{cssxref("<blend-mode>")}}</li> <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li> </ul>