Size: a a a

Front-end developers

2020 February 07

T

Timur in Front-end developers
Vasiliy Zozulya
хэй, верстальщики. Чтобы вы ответили на вопрос "Какая проблема может возникнуть если использовать z-index и opacity?"
3.5 секунды гугла
источник

T

Timur in Front-end developers
Если свойства z-index и позиционирование не заданы явно, всё просто: порядок наложения равен порядку следования элементов в HTML. (На самом деле всё немного сложнее, но пока вы не будете использовать отрицательные значения отступов для перекрытия строчных элементов, вы не будете сталкиваться с крайними случаями)

Если вы явно указываете позиционирование элементам (и их детям), то такие элементы будут перекрывать собой элементы без явно заданного свойства позиционирования. (Говоря «явно указываете позиционирование» – я имею ввиду любое значение, кроме статического, например: абсолютное, или относительное).

И наконец, случай, когда z-index задан. Для начала, вполне естественно предполагать, что элементы с большим z-index будут находиться выше элементов с меньшим z-index, а любой элемент с установленным z-index будет находится выше элемента без установленного z-index, но это не так. Во первых, z-index учитывается только на явно позиционированных элементах. Если вы попробуете установить z-index на не позиционированный элемент, то ничего не произойдет. Во вторых, значения z-index могут создавать контексты наложения. Хм, всё стало намного сложнее, не так ли?

Контекст наложения

Элементы с общими родителями, перемещающиеся на передний или задний план вместе известны как контекст наложения. Понимание контекста наложения является ключом к пониманию z-index и порядка наложения элементов.

Каждый контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе, все дочерние элементы так же попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким мыслимым и немыслимым образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону.

Новый контекст может быть сформирован в следующих случаях:
Если элемент – корневой элемент документа ( элемент)
Если элемент позиционирован не статически и его значение z-index не равно auto
Если элемент имеет прозрачность менее 1
источник

VZ

Vasiliy Zozulya in Front-end developers
Timur
3.5 секунды гугла
для меня некомильфо такое гуглить, холопские вопросы
источник

IH

Ivan Hrynevytskyi in Front-end developers
Vasiliy Zozulya
хэй, верстальщики. Чтобы вы ответили на вопрос "Какая проблема может возникнуть если использовать z-index и opacity?"
ненавижу з-индекс
источник

IH

Ivan Hrynevytskyi in Front-end developers
он столько мне проблем сделал
источник

IH

Ivan Hrynevytskyi in Front-end developers
ну или то я рагуль
источник

VZ

Vasiliy Zozulya in Front-end developers
Ivan Hrynevytskyi
ненавижу з-индекс
да я просто уже год толком не верстал, а жене какие-то стартаповцы такой вопрос на собесе задали, я подумал, что за дол***бы, а оказывается в этом что-то есть :D :D :D
источник

VZ

Vasiliy Zozulya in Front-end developers
ох уж эти верстальщики 💪
источник

IH

Ivan Hrynevytskyi in Front-end developers
?
источник

IH

Ivan Hrynevytskyi in Front-end developers
ктото меня опередил)
источник

KA

Krikun Alexandr in Front-end developers
Привет всем. Мои скилы = 0, подскажите с чего нпчать изучение js
источник

E

Elliot in Front-end developers
источник

VZ

Vasiliy Zozulya in Front-end developers
Krikun Alexandr
Привет всем. Мои скилы = 0, подскажите с чего нпчать изучение js
че с программированием?
источник

M

Mikhail in Front-end developers
Krikun Alexandr
Привет всем. Мои скилы = 0, подскажите с чего нпчать изучение js
HTML, CSS
источник

IH

Ivan Hrynevytskyi in Front-end developers
Mikhail
HTML, CSS
а при чем тут жс
источник

M

Mikhail in Front-end developers
Если скилл 0
источник

KA

Krikun Alexandr in Front-end developers
Vasiliy Zozulya
че с программированием?
Пока что никак.  Начал проходить курс cs50. Онлайн
источник

KA

Krikun Alexandr in Front-end developers
Привет
источник

E

Elliot in Front-end developers
Привет
источник

VN

Vladimir Naumenko in Front-end developers
Привет
источник