Маска при наведении, шаг 3: z-index и relative

Курсы §24. Мастерская: декоративные эффекты. Часть 2
1

  1. Здравствуйте, подскажите пожалуйста, зачем нужен z-index для <a class="overlay hexagon" href="#">Маска</a>?

  2. Так же почему если убрать z-index и вынести ссылку из section, она (маска) исчезает (перекрывается)? Она же абсолютно спозиционировнна, а у section нет z-index.

  3. Так же почему если убрать у ссылки z-index, а у section относительное позиционирование, сслыка (маска) снова появляется?

Заранее спасибо, надеюсь что ответите. Сам никак не могу понять.

2
  1. Чтобы маска была выше уровня фонового изображения, но ниже уровня кнопки, появляющейся при наведении (просто представим, что изображение маски в центре непрозрачное. Тогда будет не так очевидно, что происходит)
  2. Частично ответил выше, если вынести маску-ссылку из section, то она непонятно где будет находиться, будучи абсолютно спозиционированной. Если вы поместите её без z-index в html выше section, то она будет перекрыта секцией (т.к. маска и секция имеет z-index: auto по-умолчанию). т.к. секция и маска будут дочерними элементами body, но секция позже в коде, а значит маска будет перекрыта (частично). также вы её увидите, если поместите в html ниже секции. она выпадает из системы координат как абсолютно спозиционированный элемент, но она никуда не пропадает (задайте оверлею обводку outline: 2px solid red; и поиграйтесь).
  3. Если убрать relative у секции, то абсолютно спозиционированная маска выйдет из родителя и будет спозиционирована от глобального объекта window, т.е. от body (z-index здесь не играет роли)

грубо говоря, вы должны понимать, что если у родителя есть относительное позиционирование, то относительно его выстроится система координат абсолютных дочерних элементов внутри него. если у родителя нет относительного, то его дочерние элементы выпадают из потока и позиционируются от body.
z-index играет роль лишь в том случае, если нужно поменять местами слои. Т.е. поменять порядок внутри родителя (а в случае потери родителем относительного позиционирования, то и внутри глобального объекта).

1 лайк
3

Большое спасибо за ваш ответ!!! Честно говоря не сразу понял, моя ошибка была в том, что я считал, что абсолют перекрывает все остальное (если только не задан индекс), однако относительное позиционирование делает тоже самое, только по разному участвует в потоке. Видимо ранее неверно понял относительно этих свойств и вот сейчас вылилось. Если не затруднит, расскажите, почему задаем маску ссылкой? Еще раз огромное спасибо, до жути мешало жить.

4

просто нужен был инлайновый элемент. подошел бы даже span. просто вот так вот захотелось.'a' короче писать чем 'span', на худой конец. можно даже и не инлайновый, вообще любой. самые короткие a и p. но p семантически не подходит =)

5

Спасибо, семпай!!!:metal::metal::metal::metal: