Позиционирование

В Chakra UI система позиционирования строится на основе свойства position, аналогично стандартному CSS, и тесно интегрирована с системой styled props, что позволяет управлять позиционированием компонентов через пропсы без написания отдельных CSS-классов. Основные значения свойства position:

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

Пример использования:

<Box position="absolute" top="10px" left="20px" bg="teal.500" w="100px" h="100px" />

В этом примере Box будет смещён от верхнего левого угла своего позиционированного родителя на 10 и 20 пикселей соответственно.

Свойства смещения: top, right, bottom, left

Chakra UI поддерживает все стандартные CSS-свойства смещения для элементов с позиционированием relative, absolute, fixed и sticky:

  • top — смещение от верхнего края.
  • right — смещение от правого края.
  • bottom — смещение от нижнего края.
  • left — смещение от левого края.

Свойства могут принимать как числовые значения (они интерпретируются в px), так и значения из тематической шкалы Chakra UI:

<Box position="relative" top={4} left="8" bg="blue.300" w="150px" h="150px" />

Здесь top={4} использует значение из theme.space[4], обеспечивая консистентность отступов по всему приложению.

Z-Index и управление слоями

Свойство zIndex в Chakra UI контролирует порядок наложения элементов. Оно может быть указано как числом или через предопределённые ключи темы:

<Box position="absolute" zIndex="dropdown" top={0} left={0} w="200px" h="200px" bg="red.400" />

Chakra UI по умолчанию предоставляет следующие ключи для z-index в теме:

  • dropdown
  • overlay
  • modal
  • popover
  • tooltip

Использование предопределённых ключей упрощает поддержку проекта и делает визуальные слои более предсказуемыми.

Flex и Grid для позиционирования

Помимо абсолютного и относительного позиционирования, Chakra UI широко использует Flexbox и CSS Grid через компоненты Flex и Grid. Эти компоненты позволяют управлять выравниванием, распределением и позиционированием элементов без использования position.

Пример использования Flex:

<Flex justify="space-between" align="center" h="100px" bg="gray.100">
  <Box w="50px" h="50px" bg="red.500" />
  <Box w="50px" h="50px" bg="green.500" />
  <Box w="50px" h="50px" bg="blue.500" />
</Flex>
  • justify отвечает за горизонтальное распределение элементов (flex-start, center, space-between и т.д.).
  • align управляет вертикальным выравниванием (flex-start, center, stretch).

Пример Grid:

<Grid templateColumns="repeat(3, 1fr)" gap={4}>
  <Box bg="red.300" h="100px" />
  <Box bg="green.300" h="100px" />
  <Box bg="blue.300" h="100px" />
</Grid>

Свойство templateColumns задаёт структуру колонок, gap — расстояние между элементами. Grid идеально подходит для сложных макетов с множеством элементов.

Sticky позиционирование в Chakra UI

Свойство sticky применяется для создания элементов, которые остаются видимыми при прокрутке до определённой позиции. Для его работы необходимо указать хотя бы одно смещение (top, left и т.д.):

<Box position="sticky" top="0" bg="white" zIndex="overlay" p={4}>
  Заголовок страницы
</Box>

Элемент останется закреплённым в верхней части экрана, пока не будет прокручен родительский контейнер.

Относительные и абсолютные размеры при позиционировании

Chakra UI позволяет комбинировать позиционирование с размерами и отступами:

  • width (w) и height (h) — могут быть в пикселях, процентах или по шкале темы.
  • margin (m) и padding (p) — поддерживают единицы Chakra UI, упрощая создание адаптивных макетов.

Пример адаптивного блока:

<Box
  position="absolute"
  top={{ base: 2, md: 4 }}
  left={{ base: 2, md: 8 }}
  w={{ base: "100px", md: "200px" }}
  h="150px"
  bg="purple.400"
/>

Здесь свойства меняются в зависимости от размера экрана, обеспечивая mobile-first адаптивность.

Использование Overlay и Modals

При создании всплывающих окон и оверлеев позиционирование ключевое. Chakra UI предоставляет компоненты Modal и Drawer, где position, zIndex и overlay управляются через пропсы:

<Modal isOpen={isOpen} onCl ose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Заголовок</ModalHeader>
    <ModalBody>Контент модального окна</ModalBody>
  </ModalContent>
</Modal>
  • ModalOverlay создаёт затемнение фона, обычно с высоким zIndex.
  • ModalContent фиксируется по центру экрана, используя комбинацию position и transform.

Практические советы по позиционированию

  • Для простых смещений используйте position="relative" и top/left.
  • Для слоёв поверх других элементов — absolute или fixed с корректным zIndex.
  • Для адаптивных макетов — сочетайте Flex/Grid с Chakra UI responsive props.
  • Для закреплённых элементов при прокрутке — sticky с указанием смещения и zIndex.

Использование Chakra UI для позиционирования обеспечивает консистентность, читаемость кода и удобство поддержки, минимизируя необходимость прямого написания CSS и облегчая адаптивную верстку.

Оглавление