CSS isolation प्रॉपर्टी

isolation प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि कोई तत्व एक नया स्टैकिंग संदर्भ बनाएगा या नहीं।

सिंटैक्स

isolation: auto | isolate | initial | inherit;

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .demo1 { background-color: orange; } 
      #demo2 { width: 300px; height: 400px; } 
      .demo3 { width: 150px; height: 120px; border: 3px dashed blue; padding: 5px; mix-blend-mode: difference; } 
      #demo4 { isolation: isolate; } 
      #demo5 { isolation: auto; } 
    </style> 
  </head> 
  <body> 
    <h1>डेमो हेडिंग</h1> 
    <div id="demo2" class="demo1"> 
      <div id="demo4"> 
        <div class="demo1 demo3">isolation: auto प्रॉपर्टी मान</div> 
      </div> 
      <div id="demo5"> 
        <div class="demo1 demo3">isolation: isolate प्रॉपर्टी मान</div> 
      </div> 
      <div id="demo4"> 
        <div class="demo1 demo3">isolation: auto प्रॉपर्टी मान</div> 
      </div> 
    </div> 
  </body> 
</html>

आउटपुट

व्याख्या: mix-blend-mode: difference तत्व को पृष्ठभूमि के साथ मिश्रित करता है। isolation: isolate (आईडी demo4 पर) एक नया स्टैकिंग संदर्भ बनाता है, जिससे मिश्रण केवल उस संदर्भ के अंदर होता है। isolation: auto (डिफ़ॉल्ट) कोई नया संदर्भ नहीं बनाता।