Как вычислить эффективный z-индекс элемента HTML

Question

Как вычислить эффективный z-индекс элемента HTML

Я хотел бы определить z-индекс элемента на странице HTML от кода. Я использую jQuery.

jQuery позволит мне проверять прикладной z-индекс с помощью $ (элемент) .css ("z-индекс"). Если z-индекс не установлен на том элементе непосредственно, хотя, Firefox возвращается "автоматический", и IE возвращается "0". Эффективный z-индекс того узла тогда зависит от z-индекса своего контейнера.

Я полагал, что мог вычислить эффективный z-индекс тогда путем рассмотрения узла и его родителей, пока z-индексное значение не найдено. Проблема, по крайней мере, на IE, я не могу снять неоднозначность элемента с z-индексом 0 от элемента, кто наследует z-индекс его родителя, когда в обоих случаях .css ("z-индекс") возвращается 0. Какие-либо мысли о том, как вычислить фактический z-индекс элемента?

Если Вы хотите экспериментировать, можно использовать этот код. На IE это произведет "0", "0", "0", "300". На Firefox это произведет "автоматический", "автоматический", "0", "300".

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<script type="text/javascript">
    alert($("<div></div>").css("z-index"));
    alert($("<div style='position:relative'></div>").css("z-index"));
    alert($("<div style='z-index:0'></div>").css("z-index"));
    alert($("<div style='z-index:100'></div>").css("z-index"));
</script>

</body>
</html>

13

html z-index

задан Frank Schwieterman 7 January 2010 в 23:14

2 ответа

Другие вопросы по тегам:

html z-index

Похожие вопросы:

score 8 · Answer 1

на IE, я не могу разделить элемент с z-индексом 0 от элемента, который унаследует z-индекс его родителя

Вы ищете элементы, у которых z-индекс эффективен. z-индекс эффективен только на элементах со стилем позиции, отличным от статического. Поэтому вам следует искать родителей до тех пор, пока вы не найдете элемент с позицией с z-индексом неauto.

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

На IE6-7 элемент без z-индекса неправильно получает автоматический z-индекс из 0. Так что это действительно даст вам показания 0, когда вы смотрите на позиционированный элемент без z-индекса в IE6-7... это может быть неправильно, но это отражает уже неправильный рендеринг IE, которого вам все равно придется избегать или работать с ним.

(В IE8 это окончательно исправлено, и вы действительно получите auto для первого предупреждения, предполагая подходящую настройку doctype/EmulateIE для отправки в нативный режим IE8.)

.

score 1 · Answer 2

Я вижу проблему, но не уверен, что она действительно имеет значение... потому что ноль - это корневой z-индекс страницы 0. В следующем коде:

alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").get(0).style.zIndex);
alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").children('#blah').get(0).style.zIndex);

FF сообщает 10 и (не 'auto'). IE сообщает 10 и 0. Для IE, если увидишь "0", то поднимайся на уровень. Для FF, если вы видите пустое место, то двигайтесь вверх по уровню. А потом в любом случае, если вы доберетесь до корня, и значение будет "auto" (в состоянии FF), то я (догадываюсь) могу предположить, что это 0. (Может быть, это не очень хорошее предположение!)

.