jQuery set dom元素到顶视图z index

jQuery函数将任何DOM元素设置为顶视图（将 ）使用CSS Z-INDEX属性。

jQuery<span>.fn.mb_bringToFront= function(zIndexContext){
</span>    <span>var zi=1;
</span>    <span>var els= zIndexContext && zIndexContext!="auto" ? $(zIndexContext): $("*");
</span>    els<span>.not(".alwaysOnTop").each(function() {
</span>      <span>if($(this).css("position")!="static"){
</span>        <span>var cur = parseInt($(this).css('zIndex'));
</span>        zi <span>= cur > zi ? parseInt($(this).css('zIndex')) : zi;
</span>      <span>}
</span>    <span>});
</span>    <span>$(this).not(".alwaysOnTop").css('zIndex',zi+=1);
</span>    <span>return zi;
</span>  <span>};</span>

经常询问有关jQuery和z-index

的问题

>如何使用jQuery？

设置DOM元素的Z索引，使用jQuery设置DOM元素的Z index，您可以使用.css（）方法。此方法使您可以获取或设置所选元素的样式属性。这是一个示例，说明如何使用它来设置z index：

$（“＃element”）。css（“ z-index”，“ 999”）;
在此示例中， “ #Element”是您要更改的DOM元素的ID，而“ 999”是新的z index值。

>

>为什么我的z index更改不效果？>

>可能有几个原因导致您的z指数更改没有生效。一个普遍的原因是，您要更改的元素没有定位。 Z-Index属性仅在位置元素上起作用（即具有位置的元素：相对，位置：绝对或位置：固定）。如果您的元素未定位，则可以使用.css（）方法设置其位置，例如：

$（“＃element”）。css（“位置”，“”相对”）;

>如何获得DOM元素的当前z索引？ this：

var zindex = $（“＃element”）。css（“ z-index”）;

在此示例中，zindex将持有元素的当前z index，并带有id“ element” ”。

>我可以一次设置多个元素的z索引吗？ 方法。这是一个示例：

$（“。elements”）。css（“ z index”，“ 999”）;

在此示例中，所有具有“元素”的元素都将均具有其z -Index设置为“ 999”。

>

>如何动态更改元素的z索引？ jQuery的.css（）方法与事件处理程序结合使用。例如，单击时，您可以增加元素的z索引：

$（“＃element”）。click（function（）{var zindex = parseint（$）（$（$） this）.css（“ z-index”））;
$（this）.css（“ z-index”，zindex 1）;

}）;

示例，每次单击具有ID“元素”的元素时，其Z index都会增加1。

>我可以为z index设置的最大值是多少？您可以为z索引设置的值取决于浏览器。大多数浏览器都支持z-index值高达2147483647。

>我可以为z-index吗？

>是的，您可以为z index使用负值。负z索引意味着该元素将在其他具有0或更高的Z索引的元素后面显示。
>

z index是否可以与所有HTML元素一起使用？

> z index属性与所有HTML元素一起工作，但它仅影响定位的元素（即具有位置的元素：相对，位置：绝对：绝对： ，或位置：固定）。

>我可以使用z index创建堆叠上下文吗？创建一个堆叠上下文。堆叠上下文是沿着想象的z轴相对于用户的html元素的三维概念，假定面向视口或网页。子元素？

如果父元素的z指数高于其孩子，则孩子仍然会出现在父母的顶部。这是因为默认情况下将子元素堆叠在父母面前。但是，如果父母和子女元素处于不同的堆叠上下文中，则具有较高z指数的元素将出现在顶部。

以上是jQuery set dom元素到顶视图z index的详细内容。更多信息请关注PHP中文网其他相关文章！