Позиция элемента

Классы

Описание

Модификатор управляет позицией элемента.

Эффект позиционирования зависит от значения свойства position:

• Когда задано position: absolute или fixed — значение свойства top устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.
• Когда задано position: relative — значение свойство top устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.
• Когда задано position: sticky — свойство top работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
• Когда задано position: static — свойство top не имеет никакого эффекта.

Использование: {условие действия}:{модификатор}

• Условие действия. Необязательный параметр. Определяет условие действия модификатора. Может принимать значения:
• sm — для экранов small и больше.
• md — для экранов medium и больше.
• lg — для экранов large и больше.
• xl — для экранов extra large и больше.
• Модификатор. Обязательный параметр.
  • inset-0 — все стороны элемента располгаются на соотвествующих сторонах родительского элемента.
  • inset-{x|y}-0 — стороны элемента располгаются по горизонтальным или вертикальным строронам родителя.
  • {top|right|bottom|left}-{size} — стороны элемента располгаются на указанном растоянии системы размеров от верхней, правой, нижней, левой стороне родителя.
  • -{top|right|bottom|left}-{size} — стороны элемента располгаются на указанном отрицательном растоянии от верхней, правой, нижней, левой стороне родителя.

Пример

<!-- Позиционирование по верхнему краю -->
<div class="relative h-d6 ...">
  <div class="absolute top-0 inset-x-0 h-d1 ...">1</div>
</div>

<!-- Позиционирование по правому краю -->
<div class="relative h-d6 ...">
  <div class="absolute right-0 inset-y-0 w-d1 ...">2</div>
</div>

<!-- Позиционирование по нижнему краю -->
<div class="relative h-d6 ...">
  <div class="absolute bottom-0 inset-x-0 h-d1 ...">3</div>
</div>

<!-- Позиционирование по левому краю -->
<div class="relative h-d6 ...">
  <div class="absolute left-0 inset-y-0 w-d1 ...">4</div>
</div>

<!-- Позиционирование по сторонам родителя -->
<div class="relative h-d6 ...">
  <div class="absolute a-all ...">5</div>
</div>

<!-- Позиционирование по верхнему левому углу -->
<div class="relative h-d6 ...">
  <div class="absolute left-0 top-0 h-d1 w-d1 ...">6</div>
</div>

<!-- Позиционирование по верхнему правому углу -->
<div class="relative h-d6 ...">
  <div class="absolute top-0 right-0 h-d1 w-d1 ...">7</div>
</div>

<!-- Позиционирование по нижнему правому углу -->
<div class="relative h-d6 ...">
  <div class="absolute right-0 bottom-0 h-d1 w-d1 ...">8</div>
</div>

<!-- Позиционирование по нижнему левому углу -->
<div class="relative h-d6 ...">
  <div class="absolute bottom-0 left-0 h-d1 w-d1 ...">9</div>
</div>

Адаптивность

Для управления позицией элемента, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm, md, lg, xl ) через двоеточие (:) к модификатору.

Например, воспользуйтесь модификатором md:top-0 для позиционирования по верхнему краю родителя для экранов размером Medium и больше.

<div class="md:top-0"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью