Все о … Z-индексе?
Это свойство заставляет меня перепутать.
хорошо.. я искал в Google:
Каков z-индекс?
Z-индексное свойство указывает порядок стека элемента. Элемент с большим порядком стека всегда перед элементом с более низким порядком стека.Примечание: z-индекс только работает над расположенными элементами (position:absolute, position:relative, или position:fixed). Источник ответа
Каково z-индексное использование?
Порядок которого элементы перекрывают друг друга. С этой целью можно присвоить каждому элементу номер (z-индекс). Система - то, что элемент с более высоким количеством перекрывает элемент с более низким количеством. Источник ответа
Хорошо я понимаю теперь, это организует элементы, и мы можем использовать любое число... более высокий z-индекс появляется на всех элементах.. хорошо хороший.
z-индекс и jQuery.. очень простой и очень хороший
... но я заметил из ответов, что это зависит от свойства положения, таким образом->... (Google)..
Каково отношение между z-индексом и положением?
Хорошо..., таким образом, z-индекс и положение являются парой.. должен быть вместе..
потребность больше информации::
доза это делает какие-либо конфликты в браузерах (IE7, IE8, хром... и т.д.)?
Каково z-индексное использование или что мы можем сделать с z-индексом (в зависимости от Тегов)?
... и т.д.?
исправьте меня, если я понимаю неправильно...
Заранее спасибо.
4 ответа
Z-индекс - это свойство, которое определяет, какой html-элемент появляется поверх другого html-элемента, когда они накладываются друг на друга. Основная идея заключается в том, что элемент с наибольшим z-index находится "сверху".
По умолчанию элементы имеют z-индекс, равный нулю, но если установить css-свойство одного элемента на 1, а другого на 5, то последний элемент окажется "сверху" первого, если они накладываются друг на друга.
Пока все просто, но есть несколько моментов, на которые следует обратить внимание.
Один из них, как уже упоминалось в другом ответе, заключается в том, что z-index имеет эффект, только если элемент позиционирован с позицией absolute, fixed или relative. (т.е. css свойство "position"). У непозиционированного элемента z-index равен нулю.
Еще больше усложняет ситуацию (и, по моему опыту, это та область, которую часто не понимают) концепция контекста суммирования. Более подробную информацию можно найти в таких статьях, как эта. Вкратце, каждый раз, когда вы явно устанавливаете новый z-index, вы начинаете новый контекст стекирования. Все дочерние элементы того элемента, для которого был установлен z-индекс, теперь находятся в этом новом контексте суммирования, который может быть выше или ниже контекста суммирования другого несвязанного элемента.
Что означает этот контекст суммирования? Это означает, что элемент с z-индексом 100 не обязательно находится поверх элемента с z-индексом 1. Если они находятся в разных контекстах укладки, то значение имеют только z-индексы самих контекстов укладки.
главное помнить, что z-index работает ТОЛЬКО если элемент имеет позицию relative, absolute или fixed
Я бы предложил взглянуть на это свойство на сайте SmashingMagzine.
Свойство Z-Index CSS: A Comprehensive Look
Здесь рассматриваются все тонкости этого свойства с отличными примерами и демонстрациями.
Я не совсем понимаю, о чем вы спрашиваете, но по большей части вам нужно использовать z-index, только если вы делаете сложную стилизацию, например, всплывающие подсказки или выпадающие навигации, просто для того, чтобы они отображались поверх другого содержимого страницы.
Для базового дизайна, как правило, не следует использовать свойства position и z-index, поскольку обычно можно добиться тех же эффектов с лучшей производительностью и совместимостью с браузерами, используя только floats и т.д.
Ссылка на Smashing Magazine, размещенная Сарфразом, является отличной статьей на эту тему и хорошей точкой отсчета, если вы все еще пытаетесь понять функциональность этого свойства.