คุณสมบัติ CSS isolation สำหรับ Stacking Context

คุณสมบัติ isolation ใช้บังคับให้ element สร้าง stacking context ใหม่ (new stacking context) แยกจาก context ของ parent ป้องกันการผสมผสาน blending mode ระหว่าง element ภายในและภายนอก

รูปแบบไวยากรณ์

isolation: auto | isolate | initial | inherit;

• auto (default): สร้าง stacking context เฉพาะเมื่อจำเป็น (มี opacity < 1, transform, filter, z-index บน positioned element, เป็นต้น)
• isolate: บังคับสร้าง stacking context ใหม่เสมอ

ตัวอย่างโค้ด

<!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; }   /* สร้าง stacking context ใหม่ */
    #demo5 { isolation: auto; }      /* ไม่บังคับ (default) */
  </style>
</head>
<body>
  <h1>Demo Heading</h1>
  <div id="demo2" class="demo1">
    <div id="demo4">           <!-- isolation: isolate -->
      <div class="demo1 demo3">isolation: auto property value</div>
    </div>
    <div id="demo5">           <!-- isolation: auto -->
      <div class="demo1 demo3">isolation: isolate property value</div>
    </div>
    <div id="demo4">           <!-- isolation: isolate (ซ้ำ) -->
      <div class="demo1 demo3">isolation: auto property value</div>
    </div>
  </div>
</body>
</html>

คำอธิบาย: ไอเท็มสีน้ำเงินมี mix-blend-mode: difference ผสมสีกับพื้นหลัง สีส้ม (.demo1) ในกรณี isolation: isolate (#demo4) blending จะจำกัดอยู่ภายใน stacking context นั้น ไม่กระทบพื้นหลังสีส้มด้านนอก ในขณะที่ isolation: auto (#demo5) blending จะทะลุไปกระทบพื้นหลังสีส้มภายนอก

คุณสมบัติอื่นที่สร้าง stacking context อัตโนมัติ:

• opacity < 1
• transform ไม่ใช่ none
• filter ไม่ใช่ none
• z-index บน positioned element
• mix-blend-mode ไม่ใช่ normal
• contain: layout/paint/size/style
• will-change (บางครั้ง)

การประยุกต์: ใช้ isolation: isolate เมื่อต้องการแยก blending mode ของ component ไม่ให้กระทบกัน รวมถึงแก้ปัญหา z-index conflicts ระหว่าง components