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中文網其他相關文章！