show item, который находится под другим с более высоким z-index [duplicate]
Что вам нужно понять, так это объем переменных в javascript, основанный на функции. Это важная разница, чем, скажем, c #, где у вас есть область блока, и просто копирование переменной в единицу внутри будет работать.
Обертывание ее в функции, которая оценивает возвращение функции, как ответ афкакера, сделает трюк, так как переменная теперь имеет область видимости функции.
Существует также ключевое слово let вместо var, что позволит использовать правило области блока. В этом случае определение переменной внутри for сделает трюк. Тем не менее, ключевое слово let не является практическим решением из-за совместимости.
var funcs = {};
for (var i = 0; i < 3; i++) {
let index = i; //add this
funcs[i] = function() {
console.log("My value: " + index); //change to the copy
};
}
for (var j = 0; j < 3; j++) {
funcs[j]();
}
5 ответов
Свойство z-index работает только с элементами с position значением, отличным от static (например, position: absolute;, position: relative; или position: fixed ]).
Существует также position: sticky;, который поддерживается в Firefox, имеет префикс в Safari, некоторое время работал в более ранних версиях Chrome под специальным флагом и рассматривается Microsoft для добавления в их браузер Edge.
-
1– AjAX. 29 May 2018 в 18:39
Если вы установите для другого значения значение static, но ваш z-index по-прежнему не работает, возможно, что у какого-то родительского элемента установлено z-index.
Укладка контексты имеют иерархию, и каждый контекст стекирования рассматривается в порядке стекирования контекста стека родителя.
Итак, со следующим html
div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
<div id="el3" style="z-index: 8"></div>
</div> независимо от того, насколько большой z-index из el3 будет установлен, он всегда будет находиться под el1, потому что у родителя есть более низкий контекст стекирования. Вы можете представить порядок стекирования как уровни, где порядок стекирования el3 на самом деле равен 3.8, который меньше 5.
Если вы хотите проверить контексты стеков родительских элементов, вы можете использовать это:
var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));
-
1– S.M. Nat 4 May 2018 в 06:18
-
2– Buksy 4 May 2018 в 11:12
ваши элементы должны иметь атрибут позиции. (например, абсолютный, относительный, фиксированный) или z-index не будут работать
Во многих случаях элемент должен располагаться для работы z-index.
Действительно, применение position: relative к элементам в вопросе, скорее всего, решит проблему (но кода недостаточно, чтобы знаю наверняка).
На самом деле, position: fixed, position: absolute и position: sticky также активируют z-index, но эти значения также изменяют макет. С position: relative макет не нарушен.
По сути, пока элемент не position: static (значение по умолчанию), он считается позиционированным и z-index будет работать.
Многие ответы на «Почему z-index не работает?» утверждают, что z-index работает только на позиционированных элементах. Начиная с CSS3, это уже не так.
Элементы, которые являются элементами flex items или grid , могут использовать z-index, даже если position static.
Из спецификаций:
4.3. Элемент Flex Item Z-Ordering
Элементы Flex представляют собой то же самое, что и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и
z-indexзначения, отличные отautoсоздать контекст стекирования, даже еслиposition-static.5.4. Z-axis Ordering: свойство
z-indexПорядок окраски элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа , и
z-index, отличные отauto, создают контекст стекирования, даже еслиpositionравенstatic.Вот демонстрация работы
z-index, работающей с непозиционированными элементами гибкости: https://jsfiddle.net/m0wddwxs/
-
1– TylerH 25 October 2017 в 19:14
Добавление к ответу Buksy:
Чтобы частично преодолеть проблему содержимого стеков, вы можете использовать свойства css для объединения различных элементов отображения, например:
opacity: 0.1;
или
display: none;