Bạn có thể tìm ra chỉ mục z cao nhất trong tài liệu của mình bằng cách nào?

Question

Để đặt div chứa hình ảnh văn bản trong suốt làm chỉ mục z cao nhất trong tài liệu của tôi, tôi đã chọn số 10.000 và nó đã giải quyết được sự cố của tôi.

Trước đây tôi đã đoán với số 3 nhưng nó không có hiệu lực.

Vì vậy, có cách nào khoa học hơn để tìm hiểu z-index nào cao hơn so với tất cả các yếu tố khác của bạn không?

Tôi đã thử tìm số liệu này trong Firebug nhưng không thể tìm thấy nó.

Answer 1

Bạn có thể gọi findHighestZIndex cho một loại nguyên tố đặc biệt chẳng hạn như 'DIV' như sau:

findHighestZIndex('div'); 

giả định findHighestZindex chức năng được định nghĩa như thế này:

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; 
} 

Answer 2

Không có thuộc tính mặc định hoặc bất cứ điều gì, nhưng bạn có thể viết một số javascript để lặp qua tất cả các phần tử và tìm ra. Hoặc nếu bạn sử dụng một thư viện quản lý DOM như jQuery, bạn có thể mở rộng các phương thức của nó (hoặc tìm hiểu xem nó có hỗ trợ nó hay không) để nó bắt đầu theo dõi phần tử z-index từ tải trang, và sau đó nó trở nên tầm thường để lấy giá trị z cao nhất mục lục.

Answer 3

Cách tốt nhất để giải quyết vấn đề này, theo ý kiến ​​của tôi, chỉ cần đặt ra các quy ước cho các loại z-index es được sử dụng cho các loại yếu tố khác nhau. Sau đó, bạn sẽ tìm thấy đúng z-index để sử dụng bằng cách xem lại tài liệu của mình.

Answer 4

Tôi tin rằng những gì bạn đang quan sát là Voodoo. Nếu không có quyền truy cập vào bảng phong cách hoàn chỉnh của bạn, tôi có thể tất nhiên không nói một cách đáng tin cậy; nhưng nó đánh tôi như khả năng những gì thực sự đã xảy ra ở đây là bạn đã quên rằng chỉ các yếu tố vị trí bị ảnh hưởng bởi z-index.

Ngoài ra, z-index es không được chỉ định tự động, chỉ trong các biểu định kiểu, điều này có nghĩa là không có các yếu tố khác z-index ed, z-index:1; sẽ nằm trên mọi thứ khác.

Answer 5

Trộm cắp một số mã từ trang web abcoder vì lợi ích của sự rõ ràng:

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

Answer 6

Tôi đoán bạn phải làm điều này cho mình ...

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; 
} 

Answer 7

Sử dụng jQuery:

nếu không có yếu tố cung cấp, nó sẽ kiểm tra tất cả các yếu tố này.

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; 
} 

Answer 8

xem xét mã này mà bạn có thể sử dụng như là một thư viện: getMaxZIndex

Answer 9

Tôi muốn thêm tôi thực hiện ECMAScript 6 mà tôi sử dụng trong một trong userscripts tôi. Tôi đang sử dụng cái này để xác định chỉ mục z của các phần tử cụ thể để chúng luôn xuất hiện cao nhất. Tôi có thể loại trừ các yếu tố này bằng bộ chọn bị chặn :not.

var highestZIndex=0; 

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

Bốn dòng thấp hơn có thể chạy nhiều lần và cập nhật các biến highestZIndex lặp đi lặp lại bằng cách tìm hiểu tối đa giữa giá trị hiện tại highestZIndex và tất cả các tính toán z-chỉ số khác của tất cả các yếu tố này. filter không bao gồm tất cả các giá trị "auto".

Answer 10

Tôi phải làm điều này cho một dự án gần đây, và tôi thấy rằng tôi đã hưởng lợi rất nhiều từ câu trả lời tuyệt vời của @Philippe Gerber ở đây và câu trả lời tuyệt vời của @flo (câu trả lời được chấp nhận).

Sự khác biệt chìa khóa dẫn đến câu trả lời nêu trên là:

• Cả CSS z-index, và bất kỳ inline z-index phong cách được tính toán và sử dụng lớn hơn của hai để so sánh và tính toán.
• Giá trị bị ép buộc thành số nguyên và bất kỳ giá trị chuỗi nào (auto, static, v.v ...) đều bị bỏ qua.

Here là một CodePen cho ví dụ mã, nhưng nó cũng được bao gồm ở đây.

(() => { 
 
    /** 
 
    * 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>

Answer 11

Sử dụng ES6 một cách tiếp cận sạch

function maxZIndex() { 

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