即使在具有位置的 div 上，css z-index 属性也不起作用答案

【问题标题】：css z-index property is not working even on divs with position即使在具有位置的 div 上，css z-index 属性也不起作用
【发布时间】：2016-05-24 17:07:25
【问题描述】：

我正在尝试使可拖动的 div 在拖动时显示在其他所有内容上。

这是我的 jquery 触摸打孔代码：

$('#draggable').draggable({
  zIndex: 99999999999,
  drag: function(event){...},
  helper: 'clone',
  position: 'absolute',
  owerflow: 'hidden'
})

我知道 z-index 仅适用于具有位置的元素，因此我也将 position:relative 添加到其他 div 中。但它仅在我位于可拖动元素的父 div 时才有效。我使用了一个包含很多类的巨大 css 文件，所以我无法复制它的正确部分。

【问题讨论】：

不回答这个问题，但我很确定 z-index 在浏览器中仅限于 32 位有符号整数，因此 99999999999 比 2147483647 大很多
补充我的上述观点。显然 z-index 循环，所以不要使用任何大于 2147483647 的数字：stackoverflow.com/a/856569/1898688

标签： javascript jquery css z-index jquery-ui-touch-punch

【解决方案1】：

您不需要在 css 中定位，只需为帮助程序创建一个自定义函数，您可以在其中将实际拖动的元素添加到包含您的放置元素的外部元素。

$('#draggable').draggable({
  zIndex: 20,
  drag: function(event){...},
  helper: function(){
    $("#outerElement").append($("#draggable").clone().attr('id', 'itWorks'))
    return $("#itWorks");
  },
})

【讨论】：