2

Всем привет, итак, у меня есть кнопка с фоновым цветом, и при наведении ее заполняет оверлей с другим фоном, но с z-index недопонимание какое-то:

По умолчанию z-index у всех равен 0, значит, при наведении на relative-кнопку, абсолютно спозиционированный в ней псевдоэлемент перекрывает ее собой, так как в коде он идет ниже. Если я задаю псевдоэлементу z-index -1, он уходит за родителя-кнопку и его не видно, ведь у кнопки z-index не задан, но по умолчанию он равен 0, что больше -1.

Потом я явно задаю кнопке z-index: 0 и внезапно оверлей начинает заполнять background-фон кнопки при наведении, а сама подпись на кнопке - видна.

Собственно мне непонятно:

  1. Если z-index равен 0 по умолчанию, почему что-то меняется, если задать его в 0 явно?
  2. Как оверлей проталкивает своей фоновый цвет к кнопке, но не трогает подпись, если его z-index равен -1, а у кнопки он равен 0 (хотя 1/2/etc у нее оказывают тот же эффект)?

https://jsfiddle.net/Solow/pv9x8zeq/5/

.btn {
  position: relative;
  border: 0;
  padding: 15px 20px;
  background-color: lightgrey;
  cursor: pointer;
  color: white;
  z-index: 0;

  &:hover::before {
    width: 100%;
  }

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: dimgrey;
    transition: .5s;
  }
}
2
  • Дефолтный z-index = auto (расположение в зависимости от html) а не 0. Отсюда и делайте выводы.
    – InDevX
    9 ноя 2019 в 4:42
  • @InDevX Нашел вот такой ответ: Default z-index of any element is 'auto' with exception of <html> which has default z-index:0. 'Auto' means that element gets z-index from its parent. По идее все равно приходим к 0.
    – Alex
    9 ноя 2019 в 4:46

1 ответ 1

0

z-index работает только с одинаковой позицией (вы не можете применить z-index relative для absolute и наоборот. только если оба будут или relative или absolute)

5
  • Ну, в примере absolute-элемент вполне уходит за relative-элемент, если получает z-index -1, при явно прописанном z-index 0 у обоих элементов, идущий последним перекрывает предыдущий, при отсутствии явного z-index у обоих ситуация аналогичная. Вроде как вполне z-index работает. Выше в jsfiddle я поменял первый элемент на absolute - все по прежнему.
    – Alex
    9 ноя 2019 в 7:14
  • я что-то не пойму что вы хотите по итогу, у вас работает так как вы написали... псевдоелементы явно отличаются от базовых элементов дом. и проводить с ними такие же манипуляции как о обычными тегами нельзя
    – noname2019
    9 ноя 2019 в 7:25
  • По итогу, как уже написал выше, я хотел узнать ответ на 2 вопроса. Кстати, если псевдоэлемент в примере заменить на вложенный и вполне обычный span - ничего не поменяется.
    – Alex
    9 ноя 2019 в 7:28
  • span display inline по умолчанию если что, а более детальную работу z-index думаю навряд вот кто-то объяснит. читайте доки разработчиков браузеров для уточнению нюансов.
    – noname2019
    9 ноя 2019 в 7:31
  • 1
    span это обычный inline до момента, пока его не спозиционировали абсолютно, если что. В примере jsfiddle выше поменяйте ::before на span, все аналогично. Я документацию читал/искал, ответа на вопросы не нашел, собственно потому тут вопрос и задал, может кто-то знает лучше или хотя бы укажет конкретную статью/спеку по теме.
    – Alex
    9 ноя 2019 в 7:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.