Почему элемент не встаёт на нужное место при вёрстке

Бейдж поверх картинки уезжает не туда, куда его поставили. Шапка, которая должна оставаться на экране при прокрутке, уходит вместе со страницей. Проблема почти всегда одна: элемент позиционируется не относительно того родителя, который кажется очевидным, а вёрстка ведётся без понимания, как браузер вообще считает координаты.

Ответ на вопрос «относительно чего считается элемент» даёт тип позиционирования. Абсолютное позиционирование выводит элемент из потока и привязывает его к ближайшему родителю, у которого задано отличное от статического позиционирование, — это подходит для бейджей и плашек. Фиксированное привязывает элемент к окну браузера независимо от прокрутки страницы, то есть именно то, что нужно для «прилипающей» шапки. В Taptop оба типа задаются в панели настроек элемента без написания CSS, но логика работы та же, что в браузере: важно понимать, какой родитель станет точкой отсчёта.

Разобраться в позиционировании стоит до того, как берёшься за попапы, фиксированные хедеры или любые наложения элементов, — без этого такие задачи решаются методом тыка.