jQuery Resizable handle z-index
I noticed that the jQuery UI's resizable handles are on top of all other elements in the page. I checked using Chrome's devel开发者_如何学JAVAoper tools and saw that they are automatically given a z-index of 1001. Is there a way to disable this and just give them the same z-index as the resizable element? Thanks.
Works best for me, cause without !important
the rule gets overwritten.
.ui-resizable-handle { z-index: auto !important; }
The z-index
is set with CSS, not JavaScript. You will need to edit the CSS responsible, in this case:
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
display: block;
}
Or, define your own rule to override the behavior. See this page for more information: http://www.mail-archive.com/jquery-ui@googlegroups.com/msg09524.html
For us this was the most convenient and least hacky way to override the default settings for jQuery-ui objects. You can replace the "resizable" component with any of their components. Just make sure this is run after jQuery is loaded but before your $(element).resziable() call.
$.extend($.ui.resizable.prototype.options, { zIndex: 2147483647 });
instead having to put !important z-index rules in your CSS, you can just remove this option from the resizable prototype, and then all handles will get the z-index you define in your CSS. usually you don't even have to define one.
// delete the zIndex property from resizable's options
// only have to do this once, before instantiating any resizables
delete $.ui.resizable.prototype.options.zIndex;
Actually, jQuery UI 1.12.1 Resizable resizer z-index default is 90.
That's not documented, but we can initialize it :
$(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>
精彩评论