CSS/JavaScript：要素の一番上のZ-インデックス/一番上のモーダル要素を

Question

要素（例：<div>）をページの一番上のレイヤにしたいと考えています。

私がこれを行うための唯一の方法は、要素がブラウザが許す最大値（int32？）のstyle="z-index:"という値を持つように指定することです。

これは間違いありませんか？

代わりに、何らかの形で要素のz-indexが最高になるようにして、<div>のz-indexを[highest element's value] + 1にすることはできますか？例：

$myDiv.css("z-index", $(document.body).highestZIndex() + 1); 

モーダルJavaScriptの「ウィンドウ」はどのように機能しますか？

Answer 1

http://abcoder.com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/ - >最大z-インデックスを見つけて+1を割り当てます。ここで

Answer 2

はそれを行う方法は次のとおりです。

var elements = document.getElementsByTagName("*"); 
var highest_index = 0; 

for (var i = 0; i < elements.length - 1; i++) { 
    if (parseInt(elements[i].style.zIndex) > highest_index) { 
     highest_index = parseInt(elements[i].style.zIndex; 
    } 
} 

highest_indexは今ちょうどその値に1を追加し、あなたが好きな場所にそれを適用する...ページ上の最高のzインデックスが含まれています。

再び

var highest_index = 0; 

$("[z-index]").each(function() { 
    if ($(this).attr("z-index") > highest_index) { 
     highest_index = $(this).attr("z-index"); 
    } 
}); 

、要素に新しいインデックスを適用するのと同じ方法：

$("your_element").attr("z-index", highest_index + 1); 

ここで別のjQueryを使用して同じことを達成する方法があります

your_element.style.zIndex = highest_index + 1; 

：そうのようにあなたはそれを適用することができます

Answer 3

Z-indexは属性ではなくCSSスタイルであるため、SheaviのjQueryソリューションは機能しません。

は、代わりにこれを試してみてください：

raiseToHighestZindex = function(elem) { 
    var highest_index = 0; 
    $("*").each(function() { 
     var cur_zindex= $(this).css("z-index"); 
     if (cur_zindex > highest_index) { 
      highest_index = cur_zindex; 
      $(elem).css("z-index", cur_zindex + 1); 
     } 
    }); 
    return highest_index; 
}; 

戻り値は、JavaScriptの非同期な性質のために期待するものではないかもしれないが、任意の要素に対して関数を呼び出すと、正常に動作します。

Answer 4

スタッキングコンテキストはどうですか？ ではなく、が常に真である：文書では、最も高いzインデックスが上になる。参照：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/。スタッキング・コンテキストを考慮に入れない場合、10億を設定するだけでは要素を最上位にすることはできません。