React Frontend Developer

Question 1

Что произойдёт с соседними элементами при применении relative и absolute к одному из них?

Accepted Answer

relative: Соседние элементы остаются на месте, как если бы сдвига не было.absolute: Элемент удаляется из потока, соседи занимают его место.

Question 2

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

Accepted Answer

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

Question 3

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

Accepted Answer

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

Question 4

Что нужно указать у родительского элемента, чтобы дочерний элемент с position: absolute позиционировался относительно него?

Accepted Answer

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

Question 5

Почему transform: translate считается более производительным, чем изменение position: absolute?

Accepted Answer

Transform: translate() запускает композитинг на GPU, не вызывая reflow или repaint. Изменение position: absolute требует пересчёта геометрии (reflow) и перерисовки (repaint), что нагружает CPU. Поэтому translate быстрее и плавнее, особенно для анимаций.

Question 6

Как работают позиции (position) в CSS: static, relative, absolute, fixed, sticky?

Accepted Answer

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

Question 7

Для элементов с position: absolute — какие критерии определяют, кто является containing block (содержащим блоком)? Достаточно ли только position: relative у родителя, или есть другие варианты?

Accepted Answer

Для элементов с position: absolute содержащим блоком является ближайший предок с position, отличным от static (например, relative, absolute, fixed, sticky). Если такого предка нет, содержащим блоком становится корневой элемент (html). Только position: relative у родителя — один из вариантов, но не единственный.

Вопросы React Frontend Developer