Самое важное при разработке веб-страниц — правильное расположение элементов. Это можно легко сделать, используя классы позиции Tailwind. Позиционирование может быть разных типов, одно из них – статическое.
В этом блоге будет показано, как статически позиционировать элемент.
Как статически позиционировать элемент в DOM – Tailwind?
Элемент можно позиционировать статически с помощью « статический Класс позиции. Статическая позиция — это позиция по умолчанию для элементов HTML. Элементы с « положение: статичное ” позиционируются в соответствии с обычным потоком страницы, без каких-либо стилей CSS.
Синтаксис
Синтаксис применения « статический класс:
<элемент сорт '=' 'статический' > ... < / элемент>
Здесь элементом может быть любой тег, к которому можно применить атрибут позиции.
Посетите код для практической реализации статического позиционирования:
< тело сорт '=' 'текстовый центр' >< центр >
< ч1 сорт '=' 'текст-зеленый-600 текст-5xl шрифт-жирный' >
Пример статической позиции
< / ч1 >
< б >Класс позиции CSS Tailwind< / б >
< div сорт '=' 'статический текст-слева p-2 m-2 bg-green-200 h-48' >
< п сорт '=' 'жирный шрифт' >Статически позиционировано< / п >
< div >Элемент абсолютного позиционирования< / п >
< / div >
< / div >
< / центр >
< / тело >
В этом коде:
- « текстовый центр » выравнивает содержимое тегов по центру экрана.
- Установить ' ” на зеленый цвет с помощью значка “ текст-зеленый-600 », размер текста устанавливается в пять раз с помощью « текст-5×1 » и шрифт выделяется с помощью « жирный шрифт ».
- Два ' <дел> ” элементы также создаются и устанавливают статическое левое положение для первого “ div ' используя ' статический текст слева ».
- Назначьте классы « р-2 ', ' м-2 ', ' bg-зеленый-200 ', ' х-48 » для второго элемента div, а также установите его абсолютное положение в левом нижнем углу с помощью « относительный нижний-0 левый-0 ' сорт.
Выход
Сохраните приведенный выше код в файле и просмотрите созданную им веб-страницу, которая будет выглядеть как:
Статически позиционированный элемент перемещается вместе с обычным потоком страниц, в то время как другой элемент сохраняет свое абсолютное положение.
Заключение
Чтобы статически позиционировать элемент в DOM при обычном потоке документа, используйте « статический «класс Попутного ветра» позиция ' полезность. В этом блоге показано, как позиционировать любой элемент» статически » с простой практической демонстрацией.