Как работает position в CSS — разбираем static, relative, absolute, fixed, sticky
Каждый элемент на веб-странице занимает место в нормальном потоке документа — как книги на полке библиотеки: каждая стоит там, где ей положено по порядку. Свойство position позволяет вырвать элемент из потока (или не вырывать — зависит от значения) и управлять его положением относительно чего-то: родителя, окна, скролла. Это не «переместить пиксель влево» — это изменение контекста позиционирования. Значение по умолчанию. Элемент остаётся в нормальном потоке. Свойства top, right, bottom, left, z-index игнорируются...
Задал position: absolute, а значок улетел в дальний угол страницы. Что пошло не так?
Делаешь карточку товара. Внутри название, описание и небольшой значок «Новинка», который должен находиться в правом верхнем углу. Добавляешь position: absolute, задаёшь отступы. Обновляешь страницу. Значок действительно оказывается справа сверху. Только не у карточки, а у всей страницы. Браузер выполнил задачу. Просто ваши представления о точке отсчёта немного разошлись. Разберём, почему это происходит и как исправить поведение одной строкой CSS. Возьмём простую карточку: Добавим оформление: Мы оставили сверху карточки место для значка...