[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-css-kakie-znacheniya-mozhet-prinimat-svoystvo-position":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":18,"progress":19,"seo":20},1033,"kakie-znacheniya-mozhet-prinimat-svoystvo-position",32,"osnovy-css","Основы CSS","🎨","Какие значения может принимать свойство position?","Свойство `position` определяет способ позиционирования элемента в документе и влияет на то, как работают свойства `top`, `right`, `bottom`, `left`.\n\n| Значение | Поток | Точка отсчёта | Скролл | Описание |\n|----------|-------|---------------|--------|----------|\n| `static` | Да | — | — | По умолчанию, обычный поток. `top\u002Fleft` не работают |\n| `relative` | Да (место сохраняется) | Собственная позиция | Скроллится | Сдвигается относительно своей нормальной позиции |\n| `absolute` | Нет (изъят из потока) | Ближайший positioned-предок | Скроллится | Позиционирование относительно предка с `position` != `static` |\n| `fixed` | Нет (изъят из потока) | Viewport (окно браузера) | Не скроллится | Фиксируется в окне браузера |\n| `sticky` | Да (до порога) | Ближайший scroll-контейнер | Переключается | Ведёт себя как `relative`, пока не достигнет порога — затем как `fixed` |\n\n### Примеры использования\n\n```css\n\u002F* Модальное окно по центру экрана *\u002F\n.modal {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n\u002F* Sticky-шапка таблицы *\u002F\nthead th {\n  position: sticky;\n  top: 0;\n  background: white;\n}\n\n\u002F* Бейдж на иконке *\u002F\n.icon-wrapper {\n  position: relative;\n}\n.badge {\n  position: absolute;\n  top: -5px;\n  right: -5px;\n}\n```\n\n### Positioned-предок\n\nДля `absolute` браузер поднимается по DOM вверх в поисках предка с `position` != `static`. Если такого нет — позиционирует относительно `\u003Chtml>`. Поэтому часто родителю задают `position: relative` без сдвига.\n\n> **На собеседовании:** интервьюер часто просит объяснить разницу между `absolute` и `fixed`, или решить задачу с позиционированием элемента. Частая ошибка — забыть, что `absolute` ищет positioned-предка, а не просто родителя.","","middle",[15,16,17],"css","позиционирование","раскладка",[],null,{"title":21,"description":22,"ogTitle":23,"ogDescription":24,"keywords":25,"schemaAnswer":34,"featuredSnippetReady":35},"Какие значения может принимать свойство position — Gymterview","Свойство position в CSS: static, relative, absolute, fixed, sticky. Поток документа, точка отсчёта, positioned-предок, практические примеры.","CSS position: static, relative, absolute, fixed, sticky — Gymterview","Все значения position: поток, точка отсчёта, скролл. Примеры: модальное окно, sticky-шапка, бейдж.",[26,27,28,29,30,31,32,16,33],"position CSS","static","relative","absolute","fixed","sticky","positioned-предок","собеседование","Значения position: static (по умолчанию, обычный поток), relative (сдвиг относительно своей позиции, место сохраняется), absolute (изъят из потока, относительно ближайшего positioned-предка), fixed (изъят из потока, относительно viewport, не скроллится), sticky (relative до порога, затем fixed). Для absolute браузер ищет предка с position != static, если нет — позиционирует относительно \u003Chtml>.",true]