Как засунуть абсолютный элемент под другой?
Вот код:
<div className="flex space-x-10 relative max-w-full mt-8 justify-between mx-4 md:mx-64"> <div className="border-dashed min-w-[90%] left-[50px] border-[var(--brand-color)] border absolute top-[50%]"></div> <div className="shadow-2xl relative z-[-1] py-4 px-5 md:py-8 md:px-9 rounded-full"> <p className="text-[42px] font-bold text-[var(--brand-color)]"> 01 </p> </div> </div> |
<div className="flex space-x-10 relative max-w-full mt-8 justify-between mx-4 md:mx-64"> <div className="border-dashed min-w-[90%] left-[50px] border-[var(--brand-color)] border absolute top-[50%]"></div> <div className="shadow-2xl relative z-[-1] py-4 px-5 md:py-8 md:px-9 rounded-full"> <p className="text-[42px] font-bold text-[var(--brand-color)]"> 01 </p> </div> </div>
А вот то что получается, хотелось бы засунуть линию под кружки
Дополнительно:
Если нужно линию под кружки, то зачем вы кружок помещаете под линию? z-[-1] - это нужно просто убрать.
- Таким образом первый кружок работает, для оставшихся двух линия все еще поверх, их код идентичный
- yoroxxel, возможно имеет смысл разместить одну линию позади блока со всеми тремя кружками.
- Сергей delphinpro, да, помогло, спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разместить абсолютно позиционированный элемент под другим элементом, вам необходимо использовать свойство CSS z-index. Z-index позволяет контролировать порядок наложения элементов на странице.
Прежде всего, убедитесь, что родительский элемент (элемент, под которым должен быть размещен абсолютный элемент) имеет свойство position: relative или position: absolute. Это необходимо для того, чтобы позиционировать абсолютный элемент относительно родительского.
Пример HTML-кода:
<div class="parent"> <div class="absolute"></div> </div><div class="parent"> <div class="absolute"></div> </div>
Пример CSS-кода:
.parent { position: relative; } .absolute { position: absolute; top: 0; left: 0; z-index: -1; /* отрицательное значение поместит элемент под другие элементы */ }
В данном примере абсолютный элемент будет размещен под родительским элементом с помощью свойства z-index, которое установлено на -1. Вы можете изменить значение z-index в зависимости от того, как вы хотите управлять порядком наложения элементов.
Убедитесь также, что родительский элемент имеет достаточно высоты и ширины, чтобы вместить абсолютный элемент под собой. В противном случае, абсолютный элемент может выйти за пределы родительского элемента.
Этот подход поможет вам разместить абсолютно позиционированный элемент под другим элементом на веб-странице.