{"id":7917,"date":"2026-01-04T15:27:32","date_gmt":"2026-01-04T12:27:32","guid":{"rendered":"https:\/\/1.cbm.ua\/?p=7917"},"modified":"2026-01-13T19:37:05","modified_gmt":"2026-01-13T16:37:05","slug":"html-position-static-relative-absolute-fixed-sticky","status":"publish","type":"post","link":"https:\/\/1.cbm.ua\/?p=7917","title":{"rendered":"\ud83d\udcd6HTML, CSS &#8212; position: static; relative; absolute; fixed; sticky; display: none; inline; block; flex; grid; inline-block. (\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430)"},"content":{"rendered":"\n<p>url \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a &#8212; <a href=\"https:\/\/gemini.google.com\/app\/6eee6f070ec2e14b\">https:\/\/gemini.google.com\/app\/6eee6f070ec2e14b<\/a><\/p>\n\n\n\n<p>\ud83d\udc68\u042f:  \u041e\u0431\u044a\u044f\u0441\u043d\u0438:<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n    <meta charset=\"UTF-8\">\n    <style>\n        \/* \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 *\/\n        .wp-custom-table {\n            border-collapse: collapse !important;\n            width: max-content !important; \n            font-family: Arial, sans-serif !important;\n            border: 2px solid black !important; \/* \u0412\u043d\u0435\u0448\u043d\u044f\u044f \u0440\u0430\u043c\u043a\u0430 *\/\n            margin: 20px 0;\n            line-height: 1.2;\n        }\n\n        \/* \u041f\u0420\u0418\u041d\u0423\u0414\u0418\u0422\u0415\u041b\u042c\u041d\u041e \u0423\u0411\u0418\u0420\u0410\u0415\u041c \u0412\u041d\u0423\u0422\u0420\u0415\u041d\u041d\u0418\u0415 \u041b\u0418\u041d\u0418\u0418 (\u0434\u043b\u044f WordPress) *\/\n        .wp-custom-table, \n        .wp-custom-table tr, \n        .wp-custom-table td, \n        .wp-custom-table th {\n            border: none !important; \n            box-shadow: none !important; \/* \u041d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u043b\u0438\u043d\u0438\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0442\u0435\u043d\u044f\u043c\u0438 *\/\n            text-align: left !important; \/* \u041f\u0420\u0418\u0416\u0410\u0422\u042c \u0412\u041b\u0415\u0412\u041e *\/\n        }\n\n        \/* \u0412\u0435\u0440\u0445\u043d\u044f\u044f \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 *\/\n        .wp-custom-table thead tr.header-row {\n            background-color: #cccccc !important;\n            height: 25px !important;\n        }\n\n        \/* \u0421\u0442\u0438\u043b\u0438 \u044f\u0447\u0435\u0435\u043a *\/\n        .wp-custom-table td {\n            padding: 4px 12px !important;\n            font-size: 16px !important;\n            vertical-align: middle !important;\n        }\n\n        \/* \u0426\u0432\u0435\u0442\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 *\/\n        .wp-custom-table .pos-label { \n            background-color: #e8f5e9 !important; \/* \u0421\u0432\u0435\u0442\u043b\u043e-\u0437\u0435\u043b\u0435\u043d\u044b\u0439 *\/\n            color: blue; \n            font-weight: bold; \n        } \n        .wp-custom-table .dis-label { \n            background-color: #e3f2fd !important; \/* \u0421\u0432\u0435\u0442\u043b\u043e-\u0433\u043e\u043b\u0443\u0431\u043e\u0439 *\/\n            color: blue; \n            font-weight: bold; \n        }\n\n        \/* \u0427\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a (\u0437\u0435\u0431\u0440\u0430) *\/\n        .wp-custom-table tbody tr:nth-child(even) {\n            background-color: #f2f2f2 !important;\n        }\n\n\n    <\/style>\n<\/head>\n<body>\n\n<table class=\"wp-custom-table\">\n    <thead>\n        <tr class=\"header-row\">\n            <th colspan=\"4\"><\/th>\n        <\/tr>\n    <\/thead>\n    <tbody>\n        <tr>\n            <td class=\"pos-label w-small\">position:<\/td>\n            <td class=\"w-wide\">static<\/td>\n            <td class=\"dis-label w-small\">display:<\/td>\n            <td class=\"w-wide\">none<\/td>\n        <\/tr>\n        <tr>\n            <td><\/td>\n            <td>relative<\/td>\n            <td><\/td>\n            <td>inline<\/td>\n        <\/tr>\n        <tr>\n            <td><\/td>\n            <td>absolute<\/td>\n            <td><\/td>\n            <td>block<\/td>\n        <\/tr>\n        <tr>\n            <td><\/td>\n            <td>fixed<\/td>\n            <td><\/td>\n            <td>flex<\/td>\n        <\/tr>\n        <tr>\n            <td><\/td>\n            <td>sticky<\/td>\n            <td><\/td>\n            <td>grid<\/td>\n        <\/tr>\n        <tr>\n            <td><\/td>\n            <td><\/td>\n            <td><\/td>\n            <td>inline-block<\/td>\n        <\/tr>\n    <\/tbody>\n<\/table>\n\n<\/body>\n<\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83e\udd16\ud83d\udcacgemini:<\/p>\n\n\n\n<p>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432&nbsp;<code>position<\/code>&nbsp;\u0432 CSS \u2014 \u044d\u0442\u043e \u043a\u043b\u044e\u0447 \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043b\u044e\u0431\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0434\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u043c\u0435\u043d\u044e \u0438 \u00ab\u043b\u0438\u043f\u043a\u0438\u0445\u00bb \u0448\u0430\u043f\u043e\u043a.<\/p>\n\n\n\n<p>\u0412\u043e\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">1. static (\u0421\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0435)<\/h3>\n\n\n\n<p>\u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/strong>\u00a0\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/li>\n\n\n\n<li><strong>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/strong>\u00a0\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u00a0<code>top<\/code>,\u00a0<code>right<\/code>,\u00a0<code>bottom<\/code>,\u00a0<code>left<\/code>\u00a0\u0438\u00a0<code>z-index<\/code>\u00a0<strong>\u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442<\/strong>. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0434\u0443\u0442 \u0434\u0440\u0443\u0433 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. relative (\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435)<\/h3>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u0442\u043e\u043a\u0435, \u043d\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u00ab\u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c\u00bb.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/strong>\u00a0\u0421\u0434\u0432\u0438\u0433 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00a0<strong>\u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430<\/strong>.<\/li>\n\n\n\n<li><strong>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/strong>\u00a0\u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043c\u0435\u0441\u0442\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e,\u00a0<strong>\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u043d\u044b\u043c<\/strong>. \u0414\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0434\u044b\u0440\u0443.<\/li>\n\n\n\n<li><a href=\"#Chasto-ispolzuetsya-kak-yakor-kontejner\" data-type=\"internal\" data-id=\"#Chasto-ispolzuetsya-kak-yakor-kontejner\"><strong>\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e:<\/strong>\u00a0\u0427\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u00ab\u044f\u043a\u043e\u0440\u044c\u00bb (\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440) \u0434\u043b\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u00a0<code>position: absolute<\/code>.<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. absolute (\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435)<\/h3>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u044b\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/strong>\u00a0\u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00a0<strong>\u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/strong>, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<code>position<\/code>\u00a0\u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043e\u0442\u00a0<code>static<\/code>\u00a0(\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<code>relative<\/code>). \u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043d\u0435\u0442, \u043e\u043d \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 (\u0442\u0435\u0433\u0430\u00a0<code>&lt;html><\/code>).<\/li>\n\n\n\n<li><strong>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/strong>\u00a0\u0414\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u2014 \u043e\u043d\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u0435\u0433\u043e \u043c\u0435\u0441\u0442\u043e.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. fixed (\u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435)<\/h3>\n\n\n\n<p>\u041e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430&nbsp;<code>absolute<\/code>, \u043d\u043e \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u043a \u044d\u043a\u0440\u0430\u043d\u0443.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/strong>\u00a0\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00a0<strong>\u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 (viewport)<\/strong>.<\/li>\n\n\n\n<li><strong>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/strong>\u00a0\u041e\u043d \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 \u043c\u0435\u0441\u0442\u0435, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0448\u0430\u043f\u043e\u043a \u0441\u0430\u0439\u0442\u043e\u0432 (header) \u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043e\u043a \u00ab\u041d\u0430\u0432\u0435\u0440\u0445\u00bb.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5. sticky (\u041b\u0438\u043f\u043a\u043e\u0435)<\/h3>\n\n\n\n<p>\u0413\u0438\u0431\u0440\u0438\u0434&nbsp;<code>relative<\/code>&nbsp;\u0438&nbsp;<code>fixed<\/code>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/strong>\u00a0\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a\u00a0<code>relative<\/code>, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 (\u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0447\u0435\u0440\u0435\u0437\u00a0<code>top<\/code>,\u00a0<code>left<\/code>\u00a0\u0438 \u0442.\u0434.). \u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d \u00ab\u043f\u0440\u0438\u043b\u0438\u043f\u0430\u0435\u0442\u00bb \u0438 \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a\u00a0<code>fixed<\/code>.<\/li>\n\n\n\n<li><strong>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:<\/strong>\u00a0\u041e\u043d \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u00ab\u043b\u0438\u043f\u043a\u0438\u043c\u00bb \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0431\u043b\u043e\u043a \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u0445\u043e\u0434\u0438\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0438\u043c.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/td><td>\u0412 \u043f\u043e\u0442\u043e\u043a\u0435?<\/td><td>\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0435\u0433\u043e \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f?<\/td><td>\u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0435 \u043c\u0435\u0441\u0442\u043e?<\/td><\/tr><\/thead><tbody><tr><td><strong>static<\/strong><\/td><td>\u0414\u0430<\/td><td>\u041d\u0435 \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f<\/td><td>\u0414\u0430<\/td><\/tr><tr><td><strong>relative<\/strong><\/td><td>\u0414\u0430<\/td><td>\u0421\u0432\u043e\u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430<\/td><td>\u0414\u0430<\/td><\/tr><tr><td><strong>absolute<\/strong><\/td><td>\u041d\u0435\u0442<\/td><td>\u0411\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043d\u0435-static \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/td><td>\u041d\u0435\u0442<\/td><\/tr><tr><td><strong>fixed<\/strong><\/td><td>\u041d\u0435\u0442<\/td><td>\u041e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 (\u044d\u043a\u0440\u0430\u043d\u0430)<\/td><td>\u041d\u0435\u0442<\/td><\/tr><tr><td><strong>sticky<\/strong><\/td><td>\u0414\u0430\/\u041d\u0435\u0442<\/td><td>\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438<\/td><td>\u0414\u0430<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>\u0421\u043e\u0432\u0435\u0442:<\/strong>&nbsp;\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043d\u043e\u043f\u043a\u0438, \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0435&nbsp;<code>position: relative<\/code>, \u0430 \u0438\u043a\u043e\u043d\u043a\u0435 \u2014&nbsp;<code>position: absolute<\/code>. \u0422\u0430\u043a \u0438\u043a\u043e\u043d\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u00ab\u0443\u043b\u0435\u0442\u0430\u0442\u044c\u00bb \u0432 \u0443\u0433\u043e\u043b \u0432\u0441\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n\n\n\n<p>\u0425\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u0434\u0430, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u00ab\u043b\u0438\u043f\u043a\u0443\u044e\u00bb \u0448\u0430\u043f\u043a\u0443 \u0438\u043b\u0438 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437&nbsp;<code>absolute<\/code>?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83d\udc68\u042f:<\/p>\n\n\n\n<p id=\"Chasto-ispolzuetsya-kak-yakor-kontejner\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-nv-c-2-color\">&#171;\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e: \u0427\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u00ab\u044f\u043a\u043e\u0440\u044c\u00bb (\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440) \u0434\u043b\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 position: absolute.&#187;<\/mark><\/p>\n\n\n\n<p>\u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c ?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\ud83e\udd16\ud83d\udcacgemini:<\/p>\n\n\n\n<p>\u042d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u0435\u043c\u043e\u0432 \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435. \u0415\u0441\u043b\u0438 \u0432\u043a\u0440\u0430\u0442\u0446\u0435:&nbsp;<code>position: relative<\/code>&nbsp;\u0441\u043e\u0437\u0434\u0430\u0435\u0442&nbsp;<strong>\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442<\/strong>&nbsp;\u0434\u043b\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n\n\n\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u0435\u0437 \u00ab\u044f\u043a\u043e\u0440\u044f\u00bb<\/h3>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0430\u0434\u0438\u0442\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443\u00a0<code>position: absolute<\/code>, \u043d\u043e \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u043e\u044f\u0442\u044c\u00a0<code>static<\/code>\u00a0(\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e), <a href=\"#dochernij-element-budet-iskat-blizhajshego-pozitsionirovannogo-predka\" data-type=\"internal\" data-id=\"#dochernij-element-budet-iskat-blizhajshego-pozitsionirovannogo-predka\">\u0442\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u00ab\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e\u00bb \u043f\u0440\u0435\u0434\u043a\u0430<\/a>. \u0415\u0441\u043b\u0438 \u043e\u043d \u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u0442, \u043e\u043d \u043f\u0440\u0438\u0432\u044f\u0436\u0435\u0442\u0441\u044f \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u043a\u0440\u0430\u044e\u00a0<strong>\u0432\u0441\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u00ab\u044f\u043a\u043e\u0440\u0435\u043c\u00bb<\/h3>\n\n\n\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e&nbsp;<code>position: relative<\/code>, \u0432\u044b \u043a\u0430\u043a \u0431\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443: \u00ab\u0422\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u0447\u043a\u0430&nbsp;<code>(0,0)<\/code>&nbsp;(\u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043b\u0435\u0432\u044b\u0439 \u0443\u0433\u043e\u043b) \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u0434\u0435\u0442\u0435\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0430\u043d\u0438\u0446 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430\u00bb.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0436\u0438\u0437\u043d\u0438: \u041a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f<\/h3>\n\n\n\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0423\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\u00bb, \u0432 \u0443\u0433\u043b\u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0440\u0443\u0436\u043e\u043a \u0441 \u0446\u0438\u0444\u0440\u043e\u0439.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>\u041a\u043d\u043e\u043f\u043a\u0430 (\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c):<\/strong>\u00a0\u041c\u044b \u0434\u0430\u0435\u043c \u0435\u0439\u00a0<code>position: relative<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0430 \u2014 \u00ab\u0445\u043e\u0437\u044f\u0438\u043d\u00bb \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/li>\n\n\n\n<li><strong>\u041a\u0440\u0443\u0436\u043e\u043a (\u0420\u0435\u0431\u0435\u043d\u043e\u043a):<\/strong>\u00a0\u041c\u044b \u0434\u0430\u0435\u043c \u0435\u043c\u0443\u00a0<code>position: absolute<\/code>\u00a0\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b\u00a0<code>top: -5px; right: -5px;<\/code>.<\/li>\n<\/ol>\n\n\n\n<p><strong>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/strong>&nbsp;\u041a\u0440\u0443\u0436\u043e\u043a \u043f\u0440\u0438\u043a\u043b\u0435\u0438\u0442\u0441\u044f \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u0432\u0435\u0440\u0445\u043d\u0435\u043c\u0443 \u0443\u0433\u043b\u0443&nbsp;<strong>\u0441\u0430\u043c\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438<\/strong>, \u043a\u0443\u0434\u0430 \u0431\u044b \u0432\u044b \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0415\u0441\u043b\u0438 \u0431\u044b \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e&nbsp;<code>relative<\/code>, \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043a\u0440\u0443\u0436\u043e\u043a \u0443\u043b\u0435\u0442\u0435\u043b \u0431\u044b \u0432 \u043f\u0440\u0430\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b&nbsp;<strong>\u0432\u0441\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441&nbsp;<code>absolute<\/code>&nbsp;\u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0431\u043b\u043e\u043a\u0430, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u0442\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u0443&nbsp;<code>position: relative<\/code>.<\/p>\n<\/blockquote>\n\n\n\n<p>\u0425\u043e\u0442\u0438\u0442\u0435, \u044f \u043d\u0430\u043f\u0438\u0448\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 HTML\/CSS \u043a\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443 \u0438 \u00ab\u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c\u00bb \u044d\u0442\u043e \u0440\u0443\u043a\u0430\u043c\u0438?<\/p>\n\n\n\n<p id=\"dochernij-element-budet-iskat-blizhajshego-pozitsionirovannogo-predka\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-nv-c-2-color\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-nv-c-2-color\">\u0442\u043e<\/mark> \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u00ab\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e\u00bb \u043f\u0440\u0435\u0434\u043a\u0430<\/mark>.\u00ab\u00bb<\/p>\n\n\n\n<p>\u043e\u0431\u044a\u044f\u0441\u043d\u0438 \u044f \u043d\u0435 \u043f\u043e\u043d\u044f\u043b<\/p>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0432 \u0441\u0435\u043c\u044c\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c, \u0447\u0442\u043e \u00ab\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439\u00bb \u043f\u0440\u0435\u0434\u043e\u043a \u2014 \u044d\u0442\u043e \u0442\u043e\u0442, \u0443 \u043a\u043e\u0433\u043e \u0435\u0441\u0442\u044c&nbsp;<strong>\u0441\u0432\u043e\u0439 \u0434\u043e\u043c<\/strong>&nbsp;(\u0441\u0432\u043e\u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442).<\/p>\n\n\n\n<p>\u041a\u043e\u0433\u0434\u0430 \u0442\u044b \u043f\u0438\u0448\u0435\u0448\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443&nbsp;<code>position: absolute<\/code>, \u043e\u043d \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u042f \u0445\u043e\u0447\u0443 \u0432\u0441\u0442\u0430\u0442\u044c \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b&nbsp;<em>X<\/em>&nbsp;\u0438&nbsp;<em>Y<\/em>. \u041d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0433\u043e \u043c\u043d\u0435 \u0438\u0445 \u0441\u0447\u0438\u0442\u0430\u0442\u044c?\u00bb<\/p>\n\n\n\n<p>\u0418 \u043e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u00ab\u0445\u043e\u0437\u044f\u0438\u043d\u0430\u00bb (\u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f) \u043f\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u0432\u0432\u0435\u0440\u0445:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>\u041e\u043d \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u043d\u0430 \u0441\u0432\u043e\u0435\u0433\u043e\u00a0<strong>\u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/strong>: \u00ab\u0423 \u0442\u0435\u0431\u044f \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0<code>position<\/code>\u00a0(\u043a\u0440\u043e\u043c\u0435\u00a0<code>static<\/code>)?\u00bb.<\/li>\n\n\n\n<li>\u0415\u0441\u043b\u0438 \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u00a0<code>position: static<\/code>\u00a0(\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e), \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0434\u0435\u0442\u00a0<strong>\u0432\u044b\u0448\u0435<\/strong>\u00a0\u2014 \u043a \u00ab\u0434\u0435\u0434\u0443\u0448\u043a\u0435\u00bb.<\/li>\n\n\n\n<li>\u0415\u0441\u043b\u0438 \u0438 \u0442\u0430\u043c\u00a0<code>static<\/code>, \u043e\u043d \u0438\u0434\u0435\u0442 \u043a \u00ab\u043f\u0440\u0430\u0434\u0435\u0434\u0443\u0448\u043a\u0435\u00bb \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/li>\n\n\n\n<li>\u0415\u0441\u043b\u0438 \u043e\u043d \u0434\u043e\u0448\u0435\u043b \u0434\u043e \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u0430 \u0438 \u043d\u0438\u043a\u043e\u0433\u043e \u043d\u0435 \u043d\u0430\u0448\u0435\u043b, \u043e\u043d \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u041b\u0430\u0434\u043d\u043e, \u0431\u0443\u0434\u0443 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u00a0<strong>\u043a\u0440\u0430\u044f \u044d\u043a\u0440\u0430\u043d\u0430 (\u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430)<\/strong>\u00bb.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u043a\u043e\u0434\u0435<\/h3>\n\n\n\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"grand-parent\">  &lt;div class=\"parent\">        &lt;div class=\"child\">&lt;\/div> &lt;\/div>\n&lt;\/div>\n<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0410:<\/strong>\u00a0\u0423 \u0432\u0441\u0435\u0445\u00a0<code>position: static<\/code>.\n<ul class=\"wp-block-list\">\n<li><code>child<\/code>\u00a0\u043f\u0440\u0438\u0432\u044f\u0436\u0435\u0442\u0441\u044f \u043a \u0443\u0433\u043b\u0443\u00a0<strong>\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0411:<\/strong>\u00a0\u0422\u044b \u0437\u0430\u0434\u0430\u043b\u00a0<code>.parent { position: relative; }<\/code>.\n<ul class=\"wp-block-list\">\n<li><code>child<\/code>\u00a0\u0443\u0432\u0438\u0434\u0438\u0442, \u0447\u0442\u043e \u0443 \u043e\u0442\u0446\u0430 \u0435\u0441\u0442\u044c \u00ab\u0441\u0432\u043e\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u00bb, \u0438 \u043f\u0440\u0438\u0432\u044f\u0436\u0435\u0442\u0441\u044f \u043a\u00a0<strong>\u0443\u0433\u043b\u0443 \u043e\u0442\u0446\u0430<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0412:<\/strong>\u00a0\u0423 \u043e\u0442\u0446\u0430\u00a0<code>static<\/code>, \u043d\u043e \u0442\u044b \u0437\u0430\u0434\u0430\u043b\u00a0<code>.grand-parent { position: relative; }<\/code>.\n<ul class=\"wp-block-list\">\n<li><code>child<\/code>\u00a0\u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0446\u0430 (\u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u043e\u0442\u00a0<code>static<\/code>) \u0438 \u043f\u0440\u0438\u0432\u044f\u0436\u0435\u0442\u0441\u044f \u043a\u00a0<strong>\u0443\u0433\u043b\u0443 \u0434\u0435\u0434\u0443\u0448\u043a\u0438<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u0427\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u00ab\u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u043a\u00bb?<\/h3>\n\n\n\n<p>\u0412 CSS \u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<code>position<\/code>&nbsp;\u2014 \u044d\u0442\u043e&nbsp;<strong>\u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e, \u043a\u0440\u043e\u043c\u0435 static<\/strong>. \u0422\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>relative<\/code><\/li>\n\n\n\n<li><code>absolute<\/code><\/li>\n\n\n\n<li><code>fixed<\/code><\/li>\n\n\n\n<li><code>sticky<\/code><\/li>\n<\/ul>\n\n\n\n<p><strong>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e&nbsp;<code>relative<\/code>&nbsp;\u0434\u043b\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f?<\/strong>&nbsp;\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e&nbsp;<code>relative<\/code>&nbsp;\u2014 \u0441\u0430\u043c\u043e\u0435 \u00ab\u0431\u0435\u0437\u043e\u0431\u0438\u0434\u043d\u043e\u0435\u00bb. \u041e\u043d\u043e \u043d\u0435 \u0432\u044b\u0431\u0438\u0432\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438\u0437 \u043f\u043e\u0442\u043e\u043a\u0430, \u043d\u0435 \u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0435\u0433\u043e \u0441 \u043c\u0435\u0441\u0442\u0430 (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u0442\u044c&nbsp;<code>top<\/code>\/<code>left<\/code>), \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0432\u0438\u0442 \u00ab\u0444\u043b\u0430\u0436\u043e\u043a\u00bb \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0434\u0435\u0442\u0435\u0439:&nbsp;<strong>\u00ab\u042f \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448 \u0446\u0435\u043d\u0442\u0440 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442!\u00bb<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 (\u041c\u0435\u0442\u0430\u0444\u043e\u0440\u0430)<\/h3>\n\n\n\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c, \u0447\u0442\u043e \u0442\u044b \u2014&nbsp;<strong>\u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0417\u0430\u043a\u0440\u044b\u0442\u044c\u00bb (\u043a\u0440\u0435\u0441\u0442\u0438\u043a)<\/strong>. \u0422\u0435\u0431\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442: \u00ab\u0412\u0441\u0442\u0430\u043d\u044c \u0432 \u043f\u0440\u0430\u0432\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0443\u0433\u043e\u043b\u00bb.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0415\u0441\u043b\u0438 \u0442\u044b \u0432\u00a0<strong>\u043a\u043e\u0440\u043e\u0431\u043a\u0435<\/strong>\u00a0(\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c) \u0441\u00a0<code>position: relative<\/code>, \u0442\u044b \u043f\u0440\u044b\u0433\u043d\u0435\u0448\u044c \u0432 \u0443\u0433\u043e\u043b \u044d\u0442\u043e\u0439 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<\/li>\n\n\n\n<li>\u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0431\u043a\u0430 \u00ab\u043e\u0431\u044b\u0447\u043d\u0430\u044f\u00bb (<code>static<\/code>), \u0442\u044b \u043f\u0440\u043e\u043b\u0435\u0442\u0438\u0448\u044c \u0441\u043a\u0432\u043e\u0437\u044c \u0435\u0451 \u0441\u0442\u0435\u043d\u043a\u0438 \u0438 \u043f\u0440\u0438\u043a\u043b\u0435\u0438\u0448\u044c\u0441\u044f \u043a \u0443\u0433\u043b\u0443\u00a0<strong>\u0432\u0441\u0435\u0439 \u043a\u043e\u043c\u043d\u0430\u0442\u044b<\/strong>\u00a0(\u044d\u043a\u0440\u0430\u043d\u0430).<\/li>\n<\/ul>\n\n\n\n<p>\u041f\u043e\u043d\u044f\u0442\u043d\u043e \u043b\u0438 \u0442\u0435\u043f\u0435\u0440\u044c, \u043f\u043e\u0447\u0435\u043c\u0443&nbsp;<code>relative<\/code>&nbsp;\u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u00ab\u044f\u043a\u043e\u0440\u0435\u043c\u00bb? \u0425\u043e\u0447\u0435\u0448\u044c, \u043f\u043e\u043a\u0430\u0436\u0443 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043a\u0443\u0441\u043e\u0447\u043a\u0435 \u043a\u043e\u0434\u0430, \u043a\u0430\u043a \u044d\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u0435\u0441\u043b\u0438 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e&nbsp;<code>relative<\/code>?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>url \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a &#8212; https:\/\/gemini.google.com\/app\/6eee6f070ec2e14b \ud83d\udc68\u042f: \u041e\u0431\u044a\u044f\u0441\u043d\u0438: position: static display: none relative inline absolute block fixed flex sticky grid inline-block \ud83e\udd16\ud83d\udcacgemini: \u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432&nbsp;position&nbsp;\u0432 CSS \u2014 \u044d\u0442\u043e \u043a\u043b\u044e\u0447 \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043b\u044e\u0431\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0434\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u043c\u0435\u043d\u044e \u0438 \u00ab\u043b\u0438\u043f\u043a\u0438\u0445\u00bb \u0448\u0430\u043f\u043e\u043a. \u0412\u043e\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: 1. static (\u0421\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0435) \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e&hellip;&nbsp;<a href=\"https:\/\/1.cbm.ua\/?p=7917\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 &raquo;<span class=\"screen-reader-text\">\ud83d\udcd6HTML, CSS &#8212; position: static; relative; absolute; fixed; sticky; display: none; inline; block; flex; grid; inline-block. (\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":7987,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[194,195,7,5],"tags":[176],"class_list":["post-7917","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spr-jk_pwa-1","category-it","category-html","category-css","tag-176"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7917"}],"version-history":[{"count":42,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7917\/revisions"}],"predecessor-version":[{"id":8038,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7917\/revisions\/8038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/media\/7987"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}