Grid Template Areas вместо Position Absolute в CSS
Используем CSS Grid, чтобы свалить несколько элементов в одну кучу, заставляя их накладываться друг на друга, а затем располагаем их в нужных позициях. Небольшой гайд по CSS Grid.
..., то с 🎁 сложнее. Помимо того, что 🎁 должен существовать внутри кнопки, он также не должен влиять на позиционирование ее текста. Для решения этой задачи существует следующий традиционный подход:
Сделать кнопку relative контейнером.
Желаемому элементу добавить absolute позицию.
Наконец, сдвинуть элемент в нужное место с помощью свойств top и left, а также translate-x и translate-y.
Далее необходимо дать кнопке класс grid а также для свойства grid-template-areas необходимо указать 'stack'. Так как grid-template-areas является нестандартным для Tailwind классом, его можно добавить как произвольное свойство:
Дело за малым. Каждому из элементов нужно объяснить, где они должны находиться. Так как это grid элементы, то нужно использовать соответствующие классы self-{...}, justify-self-{...} и даже place-self-{...}:
Этот подход позволяет не применять свойство translate к элементу, когда нам нужно отцентрировать элемент (а это почти всегда). Если мы захотим использовать translate для анимации в будущем, то оно будет свободно и анимания не сломает позицию элемента.
Банально этот синтаксис может показаться вам более приятным и понятным.
Grid Template Areas Stack это еще один способ убрать элемент из "общей раскладки" и указать ему индивидуальную позицию. Этот занятный способ можно использовать как альтернативу Position Absolute.
Посмотрите на сегодняшнюю подопытную кнопку своими глазами на Tailwind Play, добавьте в нее новый элемент, опробуйте Grid Template Areas Stack, пока прочитанное в свежей памяти.
