6

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

4

5 回答 5

13

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

.ui-resizable-handle { z-index: auto !important; }
于 2012-08-16T17:12:05.647 回答
5

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

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

或者，定义您自己的规则来覆盖该行为。有关详细信息，请参阅此页面：http: //www.mail-archive.com/jquery-ui@googlegroups.com/msg09524.html

于 2011-01-12T20:01:25.770 回答
2

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

$.extend($.ui.resizable.prototype.options, { zIndex: 2147483647 });

于 2014-01-31T21:43:37.097 回答
2

而不是必须把 !important z-index 规则放在你的 CSS 中，你可以从可调整大小的原型中删除这个选项，然后所有的句柄都会得到你在 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;
于 2014-12-17T00:06:48.703 回答
2

实际上，jQuery UI 1.12.1 Resizable resizer z-index 默认是90。

这没有记录，但我们可以初始化它：

$(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>

于 2018-08-31T22:11:54.017 回答