Мобильная версияЯ знаю основы z-index, практиковался с ним и написал код ниже:
*{ заполнение: 0; маржа: 0; размер коробки: граница-коробка; } тело{ высота: 100вх; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; цвет фона: #141214; } .карта{ /* позиция: относительная; */ ширина: 350 пикселей; высота: 450 пикселей; цвет фона: #282729; радиус границы: 15 пикселей; z-индекс: 1; } .img{ положение: относительное; ширина: 80%; цвет фона: #AAA; /* z-индекс: 1; */ } .img::before{ позиция: абсолютная; содержание: ''; слева: -70%; Топ 10%; ширина: 350 пикселей; высота: 350 пикселей; цвет фона: #9BDB23; z-индекс: -1; } изображение { максимальная ширина: 100%;
Обувь Nike размер
7 8 9 10
цвет
купить сейчас
Теперь основная проблема: (1) Когда img::before присвоен z-index: -1, он отправляется за .card (согласно документации, любой элемент с отрицательным z-индексом отправляется за своим родителем. Но здесь .img непосредственный родительский контейнер, так почему ::before отправляется за .card, а не за .img?)
(2) Если img::before присвоен z-index: -1 и .card z-index: 1, то ::before отправляется как за .img, так и за .content
(3) Если img::before присвоен z-index: -1, .card z-index: 1 (необязательно) и .img z-index: 1, то ::before отправляется позади, но выше . изображение.
Таким образом, для этого сценария существуют другие комбинации z-индексов, которые мне кажутся трудными. Может ли кто-нибудь помочь мне с этим?
