Мобильная версияЯ создаю сетку, в которой будут ряды «ячеек» и элементы, накладывающиеся на определенные ячейки.
Цель — подражать этому
Он состоит из одного родительского элемента div (вся сетка) и нескольких ячеек (голубой). Карточка (желтая) тогда является дочерней по отношению к определенной ячейке, позиция: абсолютная и накладывается поверх.
Это позволяет контексту стекирования оставаться одинаковым во всех ячейках, поскольку все они являются частью одного и того же родительского элемента.
Я хочу установить каждую строку ячеек (карточка находится в одной строке) в отдельном элементе div родительской строки.
Проблема в том, что в этом формате тень поля желтых карточек отображается неправильно.
.container { ширина: 100 пикселей; высота: 50 пикселей; положение: относительное; } .один { позиция: абсолютная; верх: 0; граница: 1 пиксель, сплошная черная; высота: 100%; ширина: 70 пикселей; box-shadow: 5px 5px синий; цвет фона: светло-желтый; } .два { цвет фона: коралловый; высота: 100%; позиция: абсолютная; верх: 0 пикселей; граница: 1 пиксель, сплошная серая; } .три { граница: 1 пиксель, сплошной зеленый; ширина: 100%; высота: 100%; цвет фона: светло-голубой; Один Два
Тень поля отсутствует в строке ниже.
Я понимаю, что это связано с контекстом стекирования. Но можно ли это сделать так, как я хочу?
