CSS覆盖已声明的select2容器z-index属性无效问题咨询

这是CSS层叠上下文机制导致的典型问题，和选择器优先级、!important权重、样式加载顺序无关：

• 给.select2-container设置多高的z-index，都只会在其父元素div.test-body创建的独立层叠上下文内部生效
• 你提到div.test-body设置了position: fixed属性，这类定位元素会自动创建独立层叠上下文，整个容器和它内部所有子元素，都会被打包成一个整体参与全局的层叠排序，内部子元素的z-index不会和外层其他元素的z-index做跨上下文比较
• 你手动取消原主题中.select2-container的z-index: 100声明时，select2默认会把下拉弹出层挂载到<body>节点下，直接跳出div.test-body的层叠上下文限制，所以下拉框能正常显示，这也是为什么你写的高z-index规则在控制台显示已覆盖、实际却不生效——规则确实生效了，但作用域被父级层叠上下文锁死了。

按推荐优先级排序：

• 方案1（官方推荐方案，无副作用）：初始化select2组件时，通过dropdownParent配置项指定下拉层的挂载节点，直接把下拉弹出层放到modal弹窗的根节点内部，让它和modal处在同一个层叠上下文
  参考初始化代码：

  // 替换成你页面对应的select选择器和modal根节点选择器
  $('.target-select').select2({
    dropdownParent: $('#your-modal-element')
  })
  

  这种方案不需要额外写CSS覆盖z-index，只要modal本身的z-index层级足够，下拉层就不会被遮挡，也不会打乱页面其他元素的层叠顺序。
• 方案2（适配无法修改初始化逻辑的场景）：监听select2的下拉打开事件，动态把生成的.select2-dropdown弹出节点移动到modal根节点或者body节点下，同步校准下拉层的定位偏移即可，本质和方案1逻辑一致，只是通过事件逻辑改挂载位置。
• 方案3（临时应急方案，不推荐长期用）：直接给div.test-body本身设置高于modal的z-index值，让整个fixed容器的整体层级盖过modal，这样它内部的select2哪怕z-index只有100也能正常显示。但这种方式会破坏整个页面的层叠顺序，很容易引发其他页面元素被异常遮挡的新问题。

注意：排查z-index相关问题时，不要盲目给元素堆超高z-index值，只要父元素创建了独立层叠上下文，子元素z-index设置到多少都无法跳出父级的层级限制。

内容的提问来源于stack exchange，提问作者Simulator88