Определить абсолютный или глобальный z-индекс? - PullRequest
3 голосов
/ 09 мая 2011

Хорошо, ребята, вот один хитрый (возможно): есть ли какой-нибудь, чтобы получить своего рода "глобальный z-индекс" элемента? Вот пример того, что я хотел бы сделать:

учитывая две ссылки на элементы, как бы вы определили, какая из них выше в z-порядке (учитывая, что они могут не иметь назначенных z-индексов или находятся в отдельных контейнерах)

Разработанные хаки приветствуются! Не очень сложные методы больше , чем приветствуется.

1 Ответ

2 голосов
/ 09 мая 2011

Это была интересная проблема. Следующий код не может быть без ошибок. Я просто собрал это прямо сейчас и не проверил это полностью. Его цель - продемонстрировать подход.

Сравнивает два элемента и проверяет их по трем критериям:

  • Просматривая дерево предков каждого элемента, если первый предок элемента A, имеющий z-индекс, имеет больший z-индекс, чем первый предок элемента B, имеющий z-индекс (если один существует для элемента B вообще), тогда элемент A находится выше в z-порядке.

  • В противном случае, если элемент B является потомком элемента A, тогда элемент B имеет более высокий z-порядок.

  • В противном случае, глядя на братьев и сестер последнего предка, которые имели общий элемент A и элемент B, если предок элемента A стоит первым в массиве дочерних элементов этого общего предка, то элемент B имеет более высокий z заказ.

Там может быть более простой способ описания логики выше, и алгоритм может быть улучшен. (Например, вторая проверка выше может быть сделана первой.) Однако, вот код:

<html>
<head>
<script language="javascript">

function getAncestorsAsArray(element){
    var arr = new Array();
    arr.unshift(element);
    while (arr[0].parentNode){
        arr.unshift(arr[0].parentNode);
    }

    return arr;
}

function highestInitialZIndex(elementArr){
    for (var i=0; i<elementArr.length; i++){
        if (elementArr[i].style == undefined) continue;
        var r = elementArr[i].style.zIndex;
        if (!isNaN(r) && r!="") {
            return r;
        }
    }

    return undefined;
}

function findCommonAncestor(elementArr1, elementArr2){
    var commonAncestor;
    for (var i=0; i<elementArr1.length; i++){
        if (elementArr1[i] == elementArr2[i]) {
            commonAncestor = elementArr1[i];
        }
    }

    return commonAncestor;
}

function findHighestAbsoluteIndex(element1, element2){
    var arr1 = getAncestorsAsArray(element1);
    var arr2 = getAncestorsAsArray(element2);

    // Does an ancestor of one elment simply have a higher z-index?
    var arr1Z = highestInitialZIndex(arr1);
    var arr2Z = highestInitialZIndex(arr2);
    if (arr1Z > arr2Z || (!isNaN(arr1Z) && isNaN(arr2Z))) return element1;
    if (arr2Z > arr1Z || (!isNaN(arr2Z) && isNaN(arr1Z))) return element2;

    // Is one element a descendent of the other?
    var commonAncestor = findCommonAncestor(arr1, arr2);
    if (commonAncestor == element1) return element2;
    if (commonAncestor == element2) return element1;

    // OK, which has the oldest common sibling? (Greater index of child node for an element = "older" child)
    var indexOfCommonAncestor;
    for (var i=0; i<arr1.length; i++){
        if (arr1[i] == commonAncestor) {
            indexOfCommonAncestor = i;
            break;
        }
    }

    for (var j=commonAncestor.childNodes.length; j>=0; j--){
        if (arr1[indexOfCommonAncestor+1] == commonAncestor.childNodes[j]) return element1;
        if (arr2[indexOfCommonAncestor+1] == commonAncestor.childNodes[j]) return element2;
    }   
}

function doTest(){
    var e1 = document.getElementById("myDiv1");
    var e2 = document.getElementById("myDiv2");

    highest = findHighestAbsoluteIndex(e1, e2);
    alert(highest.id);
}

</script>

</head>
<body onload="javascript:doTest();">

<div>
<div>
<div style="position:absolute; z-index:20;" id="myDiv1">
</div>
</div>
</div>

<div>
</div>

<div style="position:absolute; z-index:10;" id="myDiv2">
</div>

</body>
</html>

Поэкспериментируйте с вложенными div s в теле, чтобы проверить его работоспособность.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...