web-dev-qa-db-ja.com

文書内の最高のZインデックスをどのように把握できますか？

透明なテキスト画像を含むdivをドキュメント内で最も高いz-indexとして設定するために、10,000という数字を選択して問題を解決しました。

以前は3番で推測していましたが、効果はありませんでした。

それで、他のすべての要素のz-indexよりも高いz-indexを把握するより科学的な方法はありますか？

Firebugでこのメトリックを探してみましたが、見つかりませんでした。

htmlcssz-index
65
Charlie Kotter

次のように、「DIV」などの特定の要素タイプに対してfindHighestZIndexを呼び出すことができます。

findHighestZIndex('div');

次のように定義されたfindHighestZindex関数を仮定します：

function findHighestZIndex(elem)
{
  var elems = document.getElementsByTagName(elem);
  var highest = 0;
  for (var i = 0; i < elems.length; i++)
  {
    var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
    if ((zindex > highest) && (zindex != 'auto'))
    {
      highest = zindex;
    }
  }
  return highest;
}
35
flo

わかりやすくするために、abcoderサイトからいくつかのコードを盗みます。

  var maxZ = Math.max.apply(null, 
    $.map($('body *'), function(e,n) {
      if ($(e).css('position') != 'static')
        return parseInt($(e).css('z-index')) || 1;
  }));
41
Jimmy Chandra

ES6を使用したよりクリーンなアプローチ

function maxZIndex() {

     return Array.from(document.querySelectorAll('body *'))
           .map(a => parseFloat(window.getComputedStyle(a).zIndex))
           .filter(a => !isNaN(a))
           .sort()
           .pop();
}
13
Rajkeshwar Prasad

私の意見では、この問題を解決する最善の方法は、どのようなz-indexesは、さまざまな種類の要素に使用されます。次に、正しいz-indexドキュメントを振り返って使用します。

4
Gareth

あなたが観察しているのはブードゥー教だと思います。完全なスタイルシートにアクセスできないと、もちろん確実に伝えることができません。しかし、ここで実際に起こったことは、z-indexの影響を受けるのは配置された要素のみであることを忘れたことだと思われます。

さらに、z-indexesはスタイルシートでのみ自動的に割り当てられません。つまり、他のz-indexed要素がない場合、z-index:1;は他のすべての上になります。

4
Williham Totland

私はあなたがこれを自分でしなければならないと思います...

function findHighestZIndex()
{
    var divs = document.getElementsByTagName('div');
    var highest = 0;
    for (var i = 0; i < divs .length; i++)
    {
        var zindex = divs[i].style.zIndex;
        if (zindex > highest) {
            highest = zindex;
        }
    }
    return highest;
}
4
Philippe Gerber

UserScriptの1つで使用するECMAScript 6実装を追加したいと思います。私はこれを使用して、特定の要素のz-indexを定義し、常に最高に表示されるようにします。これらの要素は、連鎖:notセレクターで除外できます。

let highestZIndex = 0;

// later, potentially repeatedly
highestZIndex = Math.max(
  highestZIndex,
  ...Array.from(document.querySelectorAll("body *:not([data-highest]):not(.yetHigher)"), (elem) => parseFloat(getComputedStyle(elem).zIndex))
    .filter((zIndex) => !isNaN(zIndex))
);

下の5行は複数回実行でき、currenthighestZIndex値と他のすべての計算されたz-indicesの間の最大値を見つけることにより、変数highestZIndexを繰り返し更新できます。すべての要素。 filterは、すべての"auto"値を除外します。

4
Sebastian Simon

デフォルトのプロパティなどはありませんが、javascriptを記述してすべての要素をループし、それを把握することができます。または、jQueryのようなDOM管理ライブラリを使用する場合、ページの読み込みから要素のz-indicesの追跡を開始するようにメソッドを拡張（または既にサポートしているかどうかを確認）し、最高のz-インデックス。

4
Rahul

私は最近プロジェクトのためにこれをしなければならなかった、と私はここで @ Philippe Gerber の素晴らしい答えと @ flo の素晴らしい答え（受け入れられた答え）。

上記の回答との主な違いは次のとおりです。

  • CSS z-index、および任意のインラインz-indexスタイルが計算され、比較と計算のために2つのうち大きい方が使用されます。
  • 値は整数に強制変換され、文字列値（auto、staticなど）は無視されます。

ここ はコード例のCodePenですが、ここにも含まれています。

(() => {
  /**
   * Determines is the value is numeric or not.
   * See: https://stackoverflow.com/a/9716488/1058612.
   * @param {*} val The value to test for numeric type.
   * @return {boolean} Whether the value is numeric or not.
   */
  function isNumeric(val) {
    return !isNaN(parseFloat(val)) && isFinite(val);
  }

  
  /**
   * Finds the highest index in the current document.
   * Derived from the following great examples:
   *  [1] https://stackoverflow.com/a/1118216/1058612
   *  [2] https://stackoverflow.com/a/1118217/1058612
   * @return {number} An integer representing the value of the highest z-index.
   */
  function findHighestZIndex() {
    let queryObject = document.querySelectorAll('*');
    let childNodes = Object.keys(queryObject).map(key => queryObject[key]);
    let highest = 0;
    
    childNodes.forEach((node) => {
      // Get the calculated CSS z-index value.
      let cssStyles = document.defaultView.getComputedStyle(node);
      let cssZIndex = cssStyles.getPropertyValue('z-index');
      
      // Get any inline z-index value.
      let inlineZIndex = node.style.zIndex;

      // Coerce the values as integers for comparison.
      cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0;
      inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0;
      
      // Take the highest z-index for this element, whether inline or from CSS.
      let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex;
      
      if ((currentZIndex > highest)) {
        highest = currentZIndex;
      }
    });

    return highest;
  }

  console.log('Highest Z', findHighestZIndex());
})();
#root {
  background-color: #333;
}

.first-child {
  background-color: #fff;
  display: inline-block;
  height: 100px;
  width: 100px;
}

.second-child {
  background-color: #00ff00;
  display: block;
  height: 90%;
  width: 90%;
  padding: 0;
  margin: 5%;
}

.third-child {
  background-color: #0000ff;
  display: block;
  height: 90%;
  width: 90%;
  padding: 0;
  margin: 5%;
}

.nested-high-z-index {
  position: absolute;
  z-index: 9999;
}
<div id="root" style="z-index: 10">
  <div class="first-child" style="z-index: 11">
    <div class="second-child" style="z-index: 12"></div>
  </div>
  <div class="first-child" style="z-index: 13">
    <div class="second-child" style="z-index: 14"></div>
  </div>
  <div class="first-child" style="z-index: 15">
    <div class="second-child" style="z-index: 16"></div>
  </div>
  <div class="first-child" style="z-index: 17">
    <div class="second-child" style="z-index: 18">
      <div class="third-child" style="z-index: 19">
        <div class="nested-high-z-index">Hello!!! </div>
      </div>
    </div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
</div>
1
JohnnyCoder

JQueryの使用：

要素が指定されていない場合、すべての要素をチェックします。

function maxZIndex(elems)
{
    var maxIndex = 0;
    elems = typeof elems !== 'undefined' ? elems : $("*");

    $(elems).each(function(){
                      maxIndex = (parseInt(maxIndex) < parseInt($(this).css('z-index'))) ? parseInt($(this).css('z-index')) : maxIndex;
                      });

return maxIndex;
}
0
Misfer Ali

@ Rajkeshwar Prasad の優れたアイデアから非常にヒントを得たソリューション。

        /**
        returns highest z-index
        @param {HTMLElement} [target] highest z-index applyed to target if it is an HTMLElement.
        @return {number} the highest z-index.
        */
        var maxZIndex=function(target) {
            if(target instanceof HTMLElement){
                return (target.style.zIndex=maxZIndex()+1);
            }else{
                var zi,tmp=Array.from(document.querySelectorAll('body *'))
                    .map(a => parseFloat(window.getComputedStyle(a).zIndex));
                zi=tmp.length;
                tmp=tmp.filter(a => !isNaN(a));
                return tmp.length?Math.max(tmp.sort((a,b) => a-b).pop(),zi):zi;
            }
        };
#layer_1,#layer_2,#layer_3{
  position:absolute;
  border:solid 1px #000;
  width:100px;
  height:100px;
}
#layer_1{
  left:10px;
  top:10px;
  background-color:#f00;
}
#layer_2{
  left:60px;
  top:20px;
  background-color:#0f0;
  z-index:150;
}
#layer_3{
  left:20px;
  top:60px;
  background-color:#00f;
}
<div id="layer_1" onclick="maxZIndex(this)">layer_1</div>
<div id="layer_2" onclick="maxZIndex(this)">layer_2</div>
<div id="layer_3" onclick="maxZIndex(this)">layer_3</div>
0
yorg

Array.reduce（）

Array.reduce() を使用する最上位の _z-index_ を決定する別のソリューションを次に示します。

_const max_zindex = [...document.querySelectorAll('body *')].reduce((accumulator, current_value) => {
  current_value = +getComputedStyle(current_value).zIndex;

  if (current_value === current_value) { // Not NaN
    return Math.max(accumulator, current_value)
  }

  return accumulator;
}, 0); // Default Z-Index Rendering Layer 0 (Zero)
_
0
Grant Miller

zインデックスが最も高いall要素のIDを表示：

function show_highest_z() {
    z_inds = []
    ids = []
    res = []
    $.map($('body *'), function(e, n) {
        if ($(e).css('position') != 'static') {
            z_inds.Push(parseFloat($(e).css('z-index')) || 1)
            ids.Push($(e).attr('id'))
        }
    })
    max_z = Math.max.apply(null, z_inds)
    for (i = 0; i < z_inds.length; i++) {
        if (z_inds[i] == max_z) {
            inner = {}
            inner.id = ids[i]
            inner.z_index = z_inds[i]
            res.Push(inner)
        }
    }
    return (res)
}

使用法：

show_highest_z()

結果：

[{
    "id": "overlay_LlI4wrVtcuBcSof",
    "z_index": 999999
}, {
    "id": "overlay_IZ2l6piwCNpKxAH",
    "z_index": 999999
}]
0
Cybernetic