select选项与absolute定位div重叠，z-index失效问题求助

我遇到一个问题：即使给绿色div设置了很高的z-index，select下拉框的选项仍会与其重叠。绿色div采用absolute定位，但z-index并未生效。

代码示例 #

HTML部分

<div class="my-navbar">
   <div>My navbar</div>
  <div class="my-div1">
     <div class="my-div2">
       <ul>
         <li>item1</li>
         <li>item2</li>
         <li>item3</li>
       </ul>
     </div>
  </div>
</div>

<div class="my-main">
  <select class="my-select">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </select>
</div>

CSS部分

.my-navbar {
  position: fixed;
  width: 500px;
  height: 40px;
  background-color: orange;
}

.my-div1 {
  position: relative;
}

.my-div2 {
  position: absolute;
  height: 100px;
  width: 120px;
  background-color: green;
  z-index: 1000;
}

.my-main {
  padding-top: 50px;
}

.my-select {
  width: 150px;
  margin-left: 30px;
  z-index: 1;
}

注：实际场景中绿色div是hover触发的菜单元素，点击select框后显示该菜单，菜单会被select选项覆盖。

问题原因 #

这是因为select的下拉选项属于浏览器系统原生控件，它不是由网页渲染引擎绘制的DOM元素，而是直接由操作系统绘制在浏览器窗口的最上层。CSS的z-index只对DOM渲染层级内的元素生效，根本无法影响这类原生控件的显示层级，所以哪怕给绿色菜单设再高的z-index也压不住它。

解决办法 #

• 替代原生select：用纯DOM元素模拟下拉框（比如div+ul/li组合），完全自定义下拉逻辑和样式，这样所有元素都在同一个DOM渲染层级里，z-index就能正常控制层级关系了，这也是最彻底的解决方案。
• 动态控制select状态：当绿色菜单显示时，动态修改select的状态，比如把size属性设为1（强制收起下拉），或者临时添加disabled属性阻止下拉展开。不过这种办法会影响用户交互体验，仅适用于特殊场景。
• 调整菜单定位方式：把绿色菜单的position从absolute改成fixed（需要重新调整定位坐标适配布局），部分浏览器中fixed定位的元素层级优先级更高，有可能绕过原生控件的层级限制，但兼容性和场景适配性不如第一种方案。

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