拖拽Div时HTML z-index层级上下文问题求助

• 直接给顶部的#message容器加上非static定位+更高的z-index值，就能让它完全覆盖绿色拖拽Div：

  1. 给#message设置position: relative（这个属性不会打乱原有布局，是最稳妥的选择）
  2. 给#message设置比绿色Div更高的z-index（比如绿色Div用了4，就给#message设5）
  3. 如果#message没有背景色，记得加上background属性（比如background: #ffffff），不然透明背景会透出下方的绿色框

• 代码调整示例：
  假设你原有代码结构是这样：

  <div id="message">顶部控件文字</div>
  <div class="drag-box" style="z-index:4; position:absolute; background:green; width:200px; height:200px;"></div>
  

  修改后：

  <div id="message" style="position:relative; z-index:5; background:#fff; padding:10px;">顶部控件文字</div>
  <div class="drag-box" style="z-index:4; position:absolute; background:green; width:200px; height:200px;"></div>
  

• 之前操作无效的原因：

  • 只给#message加了position:relative但没调整z-index，层级没超过绿色Div，所以只有文字能显示在上方
  • overflow:hidden是用来裁剪父容器内超出的元素，和层级覆盖无关，对当前问题没有帮助

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