{"id":4422,"date":"2026-02-27T16:26:17","date_gmt":"2026-02-27T09:26:17","guid":{"rendered":"https:\/\/wpdesign.vn\/css-containing-block-formatting-context-va-stacking-context\/"},"modified":"2026-05-04T16:55:07","modified_gmt":"2026-05-04T09:55:07","slug":"css-containing-block-formatting-context-va-stacking-context","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/css-containing-block-formatting-context-va-stacking-context\/","title":{"rendered":"CSS: Containing Block, Formatting Context V\u00e0 Stacking Context"},"content":{"rendered":"\n

Trong ki\u1ebfn tr\u00fac giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i, c\u00e1c h\u00e0nh vi \u0111\u1ecbnh v\u1ecb v\u00e0 ch\u1ed3ng l\u1edbp kh\u00f4ng ch\u1ec9 ph\u1ee5 thu\u1ed9c v\u00e0o t\u1eebng thu\u1ed9c t\u00ednh ri\u00eang l\u1ebb m\u00e0 b\u1ecb chi ph\u1ed1i b\u1edfi c\u00e1c “ng\u1eef c\u1ea3nh” (contexts) n\u1ed9i t\u1ea1i c\u1ee7a tr\u00ecnh duy\u1ec7t. Ba c\u01a1 ch\u1ebf n\u1ec1n t\u1ea3ng th\u01b0\u1eddng g\u00e2y nh\u1ea7m l\u1eabn nh\u1ea5t l\u00e0: Containing Block<\/strong> (Kh\u1ed1i ch\u1ee9a tham chi\u1ebfu), Formatting Context<\/strong> (Ng\u1eef c\u1ea3nh \u0111\u1ecbnh d\u1ea1ng) v\u00e0 Stacking Context<\/strong> (Ng\u1eef c\u1ea3nh x\u1ebfp ch\u1ed3ng). Hi\u1ec3u r\u00f5 s\u1ef1 t\u01b0\u01a1ng t\u00e1c gi\u1eefa ch\u00fang l\u00e0 ch\u00eca kh\u00f3a \u0111\u1ec3 gi\u1ea3i quy\u1ebft tri\u1ec7t \u0111\u1ec3 c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 sai l\u1ec7ch v\u1ecb tr\u00ed, v\u1ee1 b\u1ed1 c\u1ee5c ho\u1eb7c l\u1ed7i th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb (z-index<\/code>). <\/p>\n\n

1. Ph\u00e2n \u0111\u1ecbnh vai tr\u00f2 c\u1ee7a ba lo\u1ea1i Ng\u1eef c\u1ea3nh<\/h4>\n\n

Ba ng\u1eef c\u1ea3nh n\u00e0y t\u01b0\u01a1ng \u1ee9ng v\u1edbi ba t\u1ea7ng kh\u00e1c nhau trong qu\u00e1 tr\u00ecnh Rendering:<\/p>\n\n

    \n
  1. Containing Block (H\u00ecnh h\u1ecdc):<\/strong> X\u00e1c \u0111\u1ecbnh h\u1ec7 t\u1ecda \u0111\u1ed9 tham chi\u1ebfu \u0111\u1ec3 t\u00ednh to\u00e1n v\u1ecb tr\u00ed v\u00e0 k\u00edch th\u01b0\u1edbc ph\u1ea7n t\u1eed.<\/li>\n\n\n\n
  2. Formatting Context (B\u1ed1 c\u1ee5c):<\/strong> Thi\u1ebft l\u1eadp quy t\u1eafc d\u00f2ng ch\u1ea3y n\u1ed9i dung (flow) v\u00e0 c\u00e1ch c\u00e1c h\u1ed9p (boxes) t\u01b0\u01a1ng t\u00e1c v\u1edbi nhau.<\/li>\n\n\n\n
  3. Stacking Context (Th\u1ee9 t\u1ef1 v\u1ebd):<\/strong> Qu\u1ea3n l\u00fd s\u1ef1 ph\u00e2n l\u1edbp tr\u00ean tr\u1ee5c Z (\u0111\u1ed9 s\u00e2u) \u0111\u1ec3 quy\u1ebft \u0111\u1ecbnh ph\u1ea7n t\u1eed n\u00e0o n\u1eb1m tr\u00ean ho\u1eb7c d\u01b0\u1edbi.<\/li>\n<\/ol>\n\n

    2. Ph\u00e2n t\u00edch chi ti\u1ebft t\u1eebng c\u01a1 ch\u1ebf<\/h4>\n\n

    2.1. Containing Block (Kh\u1ed1i tham chi\u1ebfu \u0111\u1ecbnh v\u1ecb)<\/h6>\n\n

    Containing Block kh\u00f4ng nh\u1ea5t thi\u1ebft l\u00e0 cha tr\u1ef1c ti\u1ebfp trong c\u00e2y DOM m\u00e0 \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh d\u1ef1a tr\u00ean thu\u1ed9c t\u00ednh position<\/code>:<\/p>\n\n

      \n
    • Static\/Relative:<\/strong> Kh\u1ed1i ch\u1ee9a l\u00e0 t\u1ed5 ti\u00ean g\u1ea7n nh\u1ea5t d\u1ea1ng kh\u1ed1i (block container).<\/li>\n\n\n\n
    • Absolute:<\/strong> T\u1ed5 ti\u00ean g\u1ea7n nh\u1ea5t c\u00f3 thu\u1ed9c t\u00ednh position<\/code> kh\u00e1c static<\/code>.<\/li>\n\n\n\n
    • Fixed:<\/strong> Th\u00f4ng th\u01b0\u1eddng l\u00e0 Viewport, nh\u01b0ng s\u1ebd thay \u0111\u1ed5i n\u1ebfu t\u1ed5 ti\u00ean c\u00f3 thu\u1ed9c t\u00ednh transform<\/code>, filter<\/code> ho\u1eb7c will-change<\/code>.<\/li>\n<\/ul>\n\n
      2.2. Formatting Context (Ng\u1eef c\u1ea3nh \u0111\u1ecbnh d\u1ea1ng)<\/h6>\n\n

      \u0110\u00e2y l\u00e0 m\u00f4i tr\u01b0\u1eddng th\u1ef1c thi c\u00e1c quy t\u1eafc Layout. Ph\u1ed5 bi\u1ebfn nh\u1ea5t l\u00e0 Block Formatting Context (BFC)<\/strong>: <\/p>\n\n

        \n
      • \u0110\u1eb7c t\u00ednh:<\/strong> Ng\u0103n ch\u1eb7n Margin Collapse (\u0111\u1ed5 v\u1ee1 l\u1ec1), bao b\u1ecdc c\u00e1c ph\u1ea7n t\u1eed n\u1ed5i (float<\/code>) v\u00e0 c\u00f4 l\u1eadp n\u1ed9i dung b\u00ean trong kh\u1ecfi c\u00e1c y\u1ebfu t\u1ed1 b\u00ean ngo\u00e0i.<\/li>\n\n\n\n
      • T\u1ea1o m\u1edbi:<\/strong> Th\u00f4ng qua overflow<\/code> (kh\u00e1c visible<\/code>), display: flow-root<\/code>, ho\u1eb7c c\u00e1c thi\u1ebft l\u1eadp Flex\/Grid.<\/li>\n<\/ul>\n\n
        2.3. Stacking Context (Ng\u1eef c\u1ea3nh x\u1ebfp ch\u1ed3ng)<\/h6>\n\n

        M\u1ed9t “v\u0169 tr\u1ee5” x\u1ebfp ch\u1ed3ng \u0111\u1ed9c l\u1eadp n\u01a1i c\u00e1c gi\u00e1 tr\u1ecb z-index<\/code> \u0111\u01b0\u1ee3c so s\u00e1nh.<\/p>\n\n

          \n
        • C\u01a1 ch\u1ebf:<\/strong> M\u1ed9t ph\u1ea7n t\u1eed c\u00f3 z-index: 999<\/code> v\u1eabn c\u00f3 th\u1ec3 n\u1eb1m d\u01b0\u1edbi ph\u1ea7n t\u1eed z-index: 1<\/code> n\u1ebfu Stacking Context cha c\u1ee7a n\u00f3 c\u00f3 th\u1ee9 t\u1ef1 \u01b0u ti\u00ean th\u1ea5p h\u01a1n.<\/li>\n\n\n\n
        • T\u1ea1o m\u1edbi:<\/strong> Kh\u00f4ng ch\u1ec9 b\u1edfi z-index<\/code>, m\u00e0 c\u00f2n b\u1edfi opacity < 1<\/code>, transform<\/code>, filter<\/code>, ho\u1eb7c thu\u1ed9c t\u00ednh isolation: isolate<\/code>.<\/li>\n<\/ul>\n\n

          3. \u0110\u1ed1i chi\u1ebfu \u0111\u1eb7c t\u00ednh k\u1ef9 thu\u1eadt<\/h4>\n\n
          Ti\u00eau ch\u00ed<\/strong><\/td>Containing Block<\/strong><\/td>Formatting Context<\/strong><\/td>Stacking Context<\/strong><\/td><\/tr><\/thead>
          M\u1ee5c ti\u00eau<\/strong><\/td>\u0110\u1ecbnh v\u1ecb t\u1ecda \u0111\u1ed9 (Geometry)<\/td>\u0110i\u1ec1u h\u01b0\u1edbng d\u00f2ng ch\u1ea3y (Flow)<\/td>Th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb (Paint)<\/td><\/tr>
          T\u00e1c \u0111\u1ed9ng tr\u1ef1c ti\u1ebfp<\/strong><\/td>top<\/code>, left<\/code>, width<\/code>, height<\/code><\/td>margin<\/code>, float<\/code>, clear<\/code><\/td>z-index<\/code>, mix-blend-mode<\/code><\/td><\/tr>
          Ph\u1ea1m vi \u1ea3nh h\u01b0\u1edfng<\/strong><\/td>T\u00ednh to\u00e1n k\u00edch th\u01b0\u1edbc\/v\u1ecb tr\u00ed<\/td>S\u1eafp x\u1ebfp n\u1ed9i dung n\u1ed9i b\u1ed9<\/td>Ph\u00e2n l\u1edbp tr\u00ean tr\u1ee5c Z<\/td><\/tr>
          L\u1ed7i th\u01b0\u1eddng g\u1eb7p<\/strong><\/td>fixed<\/code> b\u1ecb gi\u1edbi h\u1ea1n b\u1edfi transform<\/code><\/td>Margin b\u1ecb tr\u00e0n (collapse)<\/td>z-index<\/code> kh\u00f4ng c\u00f3 t\u00e1c d\u1ee5ng<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

          4. S\u1ef1 giao thoa v\u00e0 H\u1ec7 qu\u1ea3 trong Layout<\/h4>\n\n

          S\u1ef1 ph\u1ee9c t\u1ea1p c\u1ee7a CSS hi\u1ec7n \u0111\u1ea1i n\u1eb1m \u1edf ch\u1ed7 m\u1ed9t thu\u1ed9c t\u00ednh \u0111\u01a1n l\u1ebb c\u00f3 th\u1ec3 k\u00edch ho\u1ea1t \u0111\u1ed3ng th\u1eddi nhi\u1ec1u ng\u1eef c\u1ea3nh, t\u1ea1o ra nh\u1eefng “hi\u1ec7u \u1ee9ng ph\u1ee5” (side-effects) l\u00e0m thay \u0111\u1ed5i ho\u00e0n to\u00e0n h\u00e0nh vi c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed con.<\/p>\n\n

          4.1. C\u01a1 ch\u1ebf k\u00edch ho\u1ea1t \u0111a t\u1ea7ng (Multi-context Trigger)<\/h6>\n\n

          Nhi\u1ec1u thu\u1ed9c t\u00ednh hi\u1ec7n \u0111\u1ea1i \u0111\u00f3ng vai tr\u00f2 l\u00e0 t\u00e1c nh\u00e2n t\u00e1i c\u1ea5u tr\u00fac (re-structuring agents). Khi \u00e1p d\u1ee5ng transform<\/code>, filter<\/code>, ho\u1eb7c will-change: transform<\/code>, tr\u00ecnh duy\u1ec7t th\u1ef1c hi\u1ec7n ba thay \u0111\u1ed5i ng\u1ea7m \u0111\u1ecbnh: <\/p>\n\n

            \n
          • Thi\u1ebft l\u1eadp h\u1ec7 t\u1ecda \u0111\u1ed9 m\u1edbi (Containing Block):<\/strong> Ph\u1ea7n t\u1eed n\u00e0y tr\u1edf th\u00e0nh g\u1ed1c tham chi\u1ebfu. C\u00e1c ph\u1ea7n t\u1eed con c\u00f3 position: fixed<\/code> ho\u1eb7c absolute<\/code> s\u1ebd b\u1ecb gi\u1edbi h\u1ea1n trong bi\u00ean c\u1ee7a n\u00f3, thay v\u00ec tham chi\u1ebfu ra Viewport. <\/li>\n\n\n\n
          • Kh\u1edfi t\u1ea1o v\u0169 tr\u1ee5 ph\u1eb3ng (Stacking Context):<\/strong> M\u1ed9t l\u1edbp hi\u1ec3n th\u1ecb m\u1edbi \u0111\u01b0\u1ee3c t\u1ea1o ra tr\u00ean tr\u1ee5c Z. Th\u1ee9 t\u1ef1 paint c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed con b\u1ecb c\u00f4 l\u1eadp ho\u00e0n to\u00e0n v\u1edbi b\u00ean ngo\u00e0i.<\/li>\n\n\n\n
          • C\u00f4 l\u1eadp d\u00f2ng ch\u1ea3y (Formatting Context):<\/strong> Th\u01b0\u1eddng \u0111i k\u00e8m v\u1edbi vi\u1ec7c t\u1ea1o ra m\u1ed9t m\u00f4i tr\u01b0\u1eddng layout \u0111\u1ed9c l\u1eadp, ng\u0103n ch\u1eb7n s\u1ef1 \u1ea3nh h\u01b0\u1edfng c\u1ee7a float<\/code> ho\u1eb7c margin collapse<\/code>.<\/li>\n<\/ul>\n\n
            4.2. H\u1ec7 qu\u1ea3 v\u00e0 Gi\u1ea3i ph\u00e1p ki\u1ebfn tr\u00fac<\/h6>\n\n

            S\u1ef1 giao thoa n\u00e0y d\u1eabn \u0111\u1ebfn hai b\u00e0i to\u00e1n th\u1ef1c t\u1ebf ph\u1ed5 bi\u1ebfn:<\/p>\n\n

              \n
            • Gi\u1ea3i ph\u00e1p:<\/em> S\u1eed d\u1ee5ng isolation: isolate<\/code> \u0111\u1ec3 ch\u1ee7 \u0111\u1ed9ng qu\u1ea3n l\u00fd ranh gi\u1edbi x\u1ebfp ch\u1ed3ng, tr\u00e1nh vi\u1ec7c z-index<\/code> n\u1ed9i b\u1ed9 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u1ea5u tr\u00fac ph\u00e2n l\u1edbp to\u00e0n c\u1ee5c.<\/li>\n\n\n\n
            • L\u1ed7i “Fixed Position”:<\/strong>position: fixed<\/code> m\u1ea5t kh\u1ea3 n\u0103ng b\u00e1m theo m\u00e0n h\u00ecnh khi n\u1eb1m trong t\u1ed5 ti\u00ean c\u00f3 transform<\/code>.<\/li>\n\n\n\n
            • Gi\u1ea3i ph\u00e1p:<\/em> Chuy\u1ec3n c\u00e1c ph\u1ea7n t\u1eed overlay (Modal, Tooltip) ra ngo\u00e0i c\u00e2y DOM ch\u00ednh (Portal pattern) \u0111\u1ec3 tr\u00e1nh c\u00e1c t\u1ed5 ti\u00ean c\u00f3 thu\u1ed9c t\u00ednh g\u00e2y nhi\u1ec5u.<\/li>\n\n\n\n
            • S\u1ef1 c\u00f4 l\u1eadp Z-index:<\/strong> C\u00e1c ph\u1ea7n t\u1eed c\u00f3 z-index<\/code> c\u1ef1c cao v\u1eabn b\u1ecb che l\u1ea5p n\u1ebfu cha c\u1ee7a ch\u00fang n\u1eb1m trong m\u1ed9t Stacking Context th\u1ea5p h\u01a1n.<\/li>\n<\/ul>\n\n
              4.3. B\u1ea3ng \u0111\u1ed1i chi\u1ebfu thu\u1ed9c t\u00ednh<\/h6>\n\n
              \"\"<\/figure>\n\n

              5. K\u1ebft lu\u1eadn<\/h4>\n\n

              Containing Block, Formatting Context v\u00e0 Stacking Context t\u1ea1o th\u00e0nh “ki\u1ec1ng ba ch\u00e2n” trong m\u00f4 h\u00ecnh \u0111\u1ecbnh d\u1ea1ng tr\u1ef1c quan c\u1ee7a CSS. Vi\u1ec7c l\u00e0m ch\u1ee7 \u0111\u01b0\u1ee3c ch\u00fang gi\u00fap l\u1eadp tr\u00ecnh vi\u00ean chuy\u1ec3n t\u1eeb vi\u1ec7c th\u1eed-sai (trial and error) sang vi\u1ec7c thi\u1ebft k\u1ebf b\u1ed1 c\u1ee5c c\u00f3 ki\u1ec3m so\u00e1t, \u0111\u1ea3m b\u1ea3o t\u00ednh \u1ed5n \u0111\u1ecbnh c\u1ee7a giao di\u1ec7n tr\u00ean c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i. <\/p>\n","protected":false},"excerpt":{"rendered":"

              Trong ki\u1ebfn tr\u00fac giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i, c\u00e1c h\u00e0nh vi \u0111\u1ecbnh v\u1ecb v\u00e0 ch\u1ed3ng l\u1edbp kh\u00f4ng ch\u1ec9 ph\u1ee5 thu\u1ed9c v\u00e0o […]<\/p>\n","protected":false},"author":4,"featured_media":4421,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25],"tags":[],"class_list":["post-4422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publishing"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/comments?post=4422"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4422\/revisions"}],"predecessor-version":[{"id":4424,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4422\/revisions\/4424"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4421"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}