Как расположить блок под другим блоком?

Здравствуйте. Есть ряд карточек. При наведении нужно отобразить снизу блок с filter blur, пример на картинке. Сами карточки расположены в флекс-контейнере. codepen
Пытался вложить саму карточку в wrapper, но тогда фильтер применяется и на содержимое.
Как, собственно, такое верстается?
60fd950a20105526894581.png
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
@duzhinsky Автор вопроса
Спасибо всем, кто помог в решении. Мои знания тонкостей css весьма скудны, поэтому при реализации могут возникнуть проблемы. Для тех, кто столкнулся с подобными проблемами с z-index, покажу какие ошибки я успел допустить. Прошу опытных обезьян поправить меня, если я буду в чем-то не прав.

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

Повторим мой путь. Создали контейнер для карточек, как-то их там расположили, задали размеры, и даже нужную подложку получилось нарисовать как надо.

Смотреть код

<div class="container">
  <div class="cards__row">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>


.container {
  max-width: 1140px;
  margin: 0 auto;
  background-color: #eee;
}

.cards__row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.card {
  width: 200px;
  height: 300px;
  margin: 20px;
  background-color: #999;
  position: relative; 
}

.card::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 100%;
  background-color: red;
}


60fdf14d6c2d2241125904.png

Ок, дело за малым, осталось для .card::before задать z-index меньше, чем у самой краточки, то есть... -1. В это время наблюдаем, как подложка пропадает с экрана, но если у контейнера убрать background-color, то она вернется. Так мы понимаем, что при позиционировании псевдоэлемент находился в одном контексте со всей страницей и ушел под все элементы, а не только под карточку.
Как это выглядит

60fdf23addac3599283166.png
60fdf25fab634836082583.png


Мы люди не гордые, можем и подвинуться, то есть перейти на пару "слоёв" выше. Карточке задаем z-index: 2, а псевдоэлементу z-index: 1; Ура, у нас успешно ничего не изменилось, все в начальном состоянии (первая картинка в ответе). Теперь внимательно посмотрим в стиль карточки:
position: relative;
z-index: 2;

И вспоминаем условия формирования нового контекста наложения...
Element with a position value absolute or relative and z-index value other than auto.


Получилось так, что наша карточка стала "новым измерением" в позиционировании элементов, из которого псевдоэлементу уже не выбраться. Этот вариант нас совсем не устраивает, так что откатываемся в начальное состоянее.

Решение, до которого я дошел. Мы поняли, что для достижения нужного результата должны выполнятся условия:
  • Карточка не должна формировать контекст наложения
  • У карточки должно быть свойство position: relative; Иначе поплывет псевдоэлемент
  • Вся конструкция должна быть в собственном контексте, иначе подложка уходит вниз

Это наводит на мысль, что нам нужен wrapper.
Меняем код

<div class="container">
  <div class="cards__row">
    <div class="card__wrapper">
      <div class="card"></div>
    </div>
    <div class="card__wrapper">
      <div class="card"></div>
    </div>
  </div>
</div>

.card__wrapper {
  positon: relative;
  z-index: 0;
}

.card {
  width: 200px;
  height: 300px;
  margin: 20px;
  background-color: #999;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 100%;
  background-color: red;
}


Получаем желанный результат.60fdf58258011416422137.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Perflex_er
Можешь попробовать сделать блок под карточкой и по умолчанию установить opacity: 0 , а потом при наведении(псевдокласс hover) ставить opacity на 1
Очень грубый вариант:https://codepen.io/Stepan-Sorokin/pen/MWmrJBb
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы