jQuery Resizable处理z-index

Question

我注意到jQuery UI的可调整大小的句柄位于页面中所有其他元素之上。我使用Chrome的开发人员工具进行了检查，发现他们自动获得了100的z-index。有没有办法禁用它，只是给它们与可调整大小的元素相同的z-index？谢谢。

Answer 1

z-index是用CSS设置的，而不是JavaScript。在这种情况下，您需要编辑负责的CSS：

.ui-resizable-handle { 
    position: absolute;
    font-size: 0.1px; 
    z-index: 99999; 
    display: block;
}

或者，定义自己的规则以覆盖行为。有关更多信息，请参阅此页面：http://www.mail-archive.com/[email protected]/msg09524.html

Answer 2

最适合我，因为没有!important规则被覆盖。

.ui-resizable-handle { z-index: auto !important; }

Answer 3

对于我们来说，这是覆盖jQuery-ui对象的默认设置的最方便和最少hacky的方式。您可以将“可调整大小”组件替换为其任何组件。只需确保在加载jQuery之后但在$（element）.resziable（）调用之前运行它。

$ .extend（$。ui.resizable.prototype.options，{zIndex：2147483647}）;

Answer 4

而不是必须在您的CSS中放置！重要的z-index规则，您可以从可调整大小的原型中删除此选项，然后所有句柄将获得您在CSS中定义的z-index。通常你甚至不必定义一个。

// delete the zIndex property from resizable's options
// only have to do this once, before instantiating any resizables

delete $.ui.resizable.prototype.options.zIndex;

Answer 5

实际上，jQuery UI 1.12.1 Resizable resizer z-index default is 90。

这是not documented，但我们可以初始化它：

$(element).resizable({
  zIndex: 0,
});

// Red one, resizer appears through foreground divs
$("#w1").resizable(); // z-index resizer 90

// Gold one, no resizer appears through silver div
$("#w2").resizable({
  zIndex: 0, // z-index resizer 0
});

#w1, #w2, #w3 {
  position: absolute;
  width: 150px;
  height: 100px;
}

#w1 {
  left: 10px;
  top: 10px;
  background-color: red;
}

#w2 {
  left: 40px;
  top: 40px;
  background-color: gold;
}

#w3 {
  left: 70px;
  top: 70px;
  background-color: silver;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="w1"></div>
<div id="w2"></div>
<div id="w3"></div>