React Frontend Developer

Question 1

Какие есть значения у свойства position, и когда стоит использовать каждый из них?

Accepted Answer

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

Question 2

Какую роль выполняет метод CompositionLocal в Jetpack Compose?

Accepted Answer

CompositionLocal позволяет передавать значения (напр. тема, пользователь) по дереву Composable без параметров.

Question 3

Как можно заменить position: sticky, если бы его не было?

Accepted Answer

Можно использовать position: fixed + JavaScript для динамического вычисления позиции элемента при скролле. Также можно применить IntersectionObserver для отслеживания положения элемента и переключения его стилей.

Question 4

Как работает position: sticky? Когда элемент "отклеивается"?

Accepted Answer

Элемент ведет себя как relative, пока его родитель не прокрутится до указанной границы (top, left и т.д.), затем становится fixed."Отклеивается", когда родительский контейнер полностью прокручен.

Question 5

Почему при центрировании через position: absolute и top/left: 50% часто используют transform: translate(-50%, -50%)?

Accepted Answer

transform: translate(-50%, -50%) смещает элемент обратно на половину его собственной ширины и высоты, что позволяет точно отцентрировать элемент относительно точки top/left: 50%.

Question 6

Отличие position absolute от position relative

Accepted Answer

position: relative смещает элемент от его нормального положения в потоке документа, при этом исходное пространство, которое он занимал, остается за ним. position: absolute полностью вырывает элемент из потока документа и позиционирует его относительно ближайшего предка с position, отличной от static (или относительно окна браузера, если такого предка нет). Проще говоря, relative — это "сдвиг с сохранением места", а absolute — "точное размещение в указанной точке".

Вопросы React Frontend Developer