{"id":68496,"date":"2024-05-15T08:52:55","date_gmt":"2024-05-15T01:52:55","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=68496"},"modified":"2025-07-20T19:41:27","modified_gmt":"2025-07-20T12:41:27","slug":"position-css","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/position-css\/","title":{"rendered":"Position CSS l\u00e0 g\u00ec? Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/position-css\/#Position_CSS_la_gi\" >Position CSS l\u00e0 g\u00ec?&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/position-css\/#Cac_gia_tri_cua_thuoc_tinh_position_CSS\" >C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh position CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/position-css\/#Su_khac_biet_giua_cac_gia_tri_Relative_Absolute_Fixed\" >S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa c\u00e1c gi\u00e1 tr\u1ecb Relative, Absolute, Fixed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/position-css\/#Cac_cau_hoi_thuong_gap_ve_Position_CSS\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Position CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/position-css\/#Tong_ket_position_CSS\" >T\u1ed5ng k\u1ebft position CSS<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><em><strong>Position CSS l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh h\u1ed7 tr\u1ee3 s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c trang web quan tr\u1ecdng. Vi\u1ec7c hi\u1ec3u v\u00e0 \u00e1p d\u1ee5ng position CSS \u0111\u00fang c\u00e1ch c\u00f3 th\u1ec3 l\u00e0m cho c\u00e1c thi\u1ebft k\u1ebf website c\u01a1 b\u1ea3n tr\u1edf n\u00ean tinh t\u1ebf, \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c nhu c\u1ea7u th\u1ecb gi\u00e1c v\u00e0 tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. V\u1eady c\u00e1ch d\u00f9ng position CSS nh\u01b0 th\u1ebf n\u00e0o, h\u00e3y c\u00f9ng t\u00ecm hi\u1ec3u trong b\u00e0i vi\u1ebft n\u00e0y nh\u00e9.<\/strong><\/em><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Position CSS l\u00e0 g\u00ec?<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a position CSS<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa c\u00e1c gi\u00e1 tr\u1ecb Absolute, Relative, Fixed<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 position CSS<\/span><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/viec-lam-it\/css?utm_medium=anchor_text_high&amp;utm_source=blog&amp;utm_campaign=viec_lam_css&amp;utm_content=position_css\"><strong>vi\u1ec7c l\u00e0m CSS<\/strong><\/a> to\u00e0n qu\u1ed1c<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-position-css-la-gi-nbsp\"><span class=\"ez-toc-section\" id=\"Position_CSS_la_gi\"><\/span><b>Position CSS l\u00e0 g\u00ec?&nbsp;<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh position trong CSS cho ph\u00e9p b\u1ea1n x\u00e1c \u0111\u1ecbnh ch\u00ednh x\u00e1c v\u1ecb tr\u00ed c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed tr\u00ean trang. Khi k\u1ebft h\u1ee3p v\u1edbi c\u00e1c thu\u1ed9c t\u00ednh top, right, bottom v\u00e0 left, position gi\u00fap b\u1ea1n \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed cu\u1ed1i c\u00f9ng c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Position c\u00f3 c\u00e1c gi\u00e1 tr\u1ecb kh\u00e1c nhau nh\u01b0 <strong>static, relative, fixed, absolute v\u00e0 sticky<\/strong>. Trong n\u1ed9i dung b\u00ean d\u01b0\u1edbi, ITviec s\u1ebd gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 t\u1eebng gi\u00e1 tr\u1ecb v\u00e0 c\u00e1ch d\u00f9ng th\u00f4ng qua c\u00e1c v\u00ed d\u1ee5.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Tham kh\u1ea3o th\u00eam c\u00e1c b\u00e0i vi\u1ebft kh\u00e1c thu\u1ed9c c\u00f9ng ch\u1ee7 \u0111\u1ec1 CSS:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/itviec.com\/blog\/css-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>CSS l\u00e0 g\u00ec? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 CSS \u0111\u1ec3 thi\u1ebft k\u1ebf web<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/\" target=\"_blank\" rel=\"noopener\"><strong>H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/lo-trinh-hoc-html-css-cho-nguoi-moi-bat-dau\/\" target=\"_blank\" rel=\"noopener\"><strong>H\u1ecdc HTML v\u00e0 CSS: L\u1ed9 tr\u00ecnh 18 b\u01b0\u1edbc chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/grid-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n<\/strong><\/a><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/itviec.com\/blog\/tailwind-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">H\u01b0\u1edbng d\u1eabn 3 c\u00e1ch thi\u1ebft l\u1eadp Tailwind CSS chi ti\u1ebft<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/itviec.com\/blog\/animation-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ed5ng h\u1ee3p 11 hi\u1ec7u \u1ee9ng Animation CSS ph\u1ed5 bi\u1ebfn<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap<\/a><\/strong><\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-gia-tr\u1ecb-c\u1ee7a-thu\u1ed9c-tinh-position-css\"><span class=\"ez-toc-section\" id=\"Cac_gia_tri_cua_thuoc_tinh_position_CSS\"><\/span><b>C\u00e1c gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh position CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-position-static\"><b>position: static<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Theo m\u1eb7c \u0111\u1ecbnh, t\u1ea5t c\u1ea3 ph\u1ea7n t\u1eed trong CSS \u0111\u1ec1u c\u00f3 gi\u00e1 tr\u1ecb <strong>position: static<\/strong>. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 ph\u1ea7n t\u1eed s\u1ebd n\u1eb1m theo lu\u1ed3ng b\u00ecnh th\u01b0\u1eddng <\/span><span style=\"font-weight: 400;\">(<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/CSS_layout\/Normal_Flow\" target=\"_blank\" rel=\"noopener\">normal flow<\/a>)<\/span><span style=\"font-weight: 400;\"> c\u1ee7a trang v\u00e0 kh\u00f4ng ch\u1ecbu t\u00e1c \u0111\u1ed9ng c\u1ee7a c\u00e1c thu\u1ed9c t\u00ednh left, right, top, bottom hay z-index.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Xem v\u00ed d\u1ee5 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"parent-element\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"sibling-element\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'm the other sibling element.<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"main-element\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;All eyes on me. I am the main element.<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"sibling-element\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'm the other sibling element.<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Ch\u00fang ta c\u00f3 ba th\u1ebb div \u0111\u1eb7t trong m\u1ed9t th\u1ebb ch\u1ee9a cha (parent). Sau \u0111\u00f3, th\u00eam thu\u1ed9c t\u00ednh <strong>position: static<\/strong> cho th\u1ebb div c\u00f3 l\u1edbp main-element c\u00f9ng v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb left v\u00e0 top. \u0110\u1ed3ng th\u1eddi, th\u00eam m\u1ed9t s\u1ed1 ki\u1ec3u d\u00e1ng cho c\u00e1c th\u1ebb div kh\u00e1c \u0111\u1ec3 ph\u00e2n bi\u1ec7t ch\u00fang v\u1edbi ph\u1ea7n t\u1eed ch\u00ednh.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.main-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;position: static;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;left: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;bottom: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color: yellow;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.sibling-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;background-color: #f2f2f2;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 th\u1ea5y, kh\u00f4ng c\u00f3 b\u1ea5t k\u1ef3 s\u1ef1 thay \u0111\u1ed5i n\u00e0o. Nh\u01b0 v\u1eady, thu\u1ed9c t\u00ednh left v\u00e0 bottom kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn ph\u1ea7n t\u1eed c\u00f3 <strong>position: static<\/strong>.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1468\" height=\"276\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-1-vippro.png\" alt=\"\" class=\"wp-image-68536\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-1-vippro.png 1468w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-1-vippro-300x56.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-1-vippro-700x132.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-1-vippro-200x38.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-1-vippro-100x19.png 100w\" sizes=\"auto, (max-width: 1468px) 100vw, 1468px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-position-relative\"><b>Position: relative<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed c\u00f3 <strong>position: relative<\/strong> v\u1eabn tu\u00e2n theo lu\u1ed3ng th\u00f4ng th\u01b0\u1eddng c\u1ee7a t\u00e0i li\u1ec7u. Tuy nhi\u00ean, kh\u00e1c v\u1edbi ph\u1ea7n t\u1eed <strong>position: static<\/strong>, c\u00e1c thu\u1ed9c t\u00ednh left, right, top, bottom, v\u00e0 z-index c\u00f3 th\u1ec3 t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb left, right, top, v\u00e0 bottom x\u00e1c \u0111\u1ecbnh kho\u1ea3ng c\u00e1ch d\u1ecbch chuy\u1ec3n c\u1ee7a ph\u1ea7n t\u1eed so v\u1edbi v\u1ecb tr\u00ed ban \u0111\u1ea7u c\u1ee7a n\u00f3. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng d\u1ecbch chuy\u1ec3n th\u00e0nh ph\u1ea7n sang ph\u1ea3i\/d\u01b0\u1edbi, gi\u00e1 tr\u1ecb \u00e2m d\u1ecbch chuy\u1ec3n sang tr\u00e1i\/tr\u00ean.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.sibling-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;background-color: #f2f2f2;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.main-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;position: relative;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;left: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;bottom: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color: yellow;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1488\" height=\"270\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-2-vippro.png\" alt=\"\" class=\"wp-image-68537\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-2-vippro.png 1488w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-2-vippro-300x54.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-2-vippro-700x127.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-2-vippro-200x36.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-2-vippro-100x18.png 100w\" sizes=\"auto, (max-width: 1488px) 100vw, 1488px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh left v\u00e0 bottom trong v\u00ed d\u1ee5 tr\u00ean \u0111\u00e3 di chuy\u1ec3n ph\u1ea7n t\u1eed so v\u1edbi v\u1ecb tr\u00ed ban \u0111\u1ea7u c\u1ee7a n\u00f3 trong lu\u1ed3ng n\u00e0y. C\u1ee5 th\u1ec3, left di chuy\u1ec3n ph\u1ea7n t\u1eed sang tr\u00e1i theo gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong khi \u0111\u00f3, bottom di chuy\u1ec3n ph\u1ea7n t\u1eed xu\u1ed1ng d\u01b0\u1edbi theo gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. M\u1eb7c d\u00f9 v\u1eady, c\u00e1c ph\u1ea7n t\u1eed relative v\u1eabn gi\u1eef nguy\u00ean v\u1ecb tr\u00ed trong lu\u1ed3ng t\u00e0i li\u1ec7u b\u00ecnh th\u01b0\u1eddng.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-position-absolute\"><b>position: absolute<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 <strong>position: absolute<\/strong> ho\u1ea1t \u0111\u1ed9ng ch\u00ednh x\u00e1c, ph\u1ea7n t\u1eed cha g\u1ea7n nh\u1ea5t c\u1ee7a n\u00f3 c\u1ea7n c\u00f3 position kh\u00e1c static. N\u1ebfu kh\u00f4ng, absolute s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1eb7t v\u1ecb tr\u00ed d\u1ef1a tr\u00ean ph\u1ea7n t\u1eed cha ti\u1ebfp theo c\u00f3 position ph\u00f9 h\u1ee3p, ho\u1eb7c n\u1ebfu kh\u00f4ng t\u00ecm th\u1ea5y, s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1eb7t v\u1ecb tr\u00ed d\u1ef1a tr\u00ean th\u1ebb html.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5, ch\u00fang ta thay \u0111\u1ed5i v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed ch\u00ednh th\u00e0nh <strong>position: absolute<\/strong> v\u00e0 thi\u1ebft l\u1eadp thu\u1ed9c t\u00ednh <strong>position: relative<\/strong> cho ph\u1ea7n t\u1eed cha c\u1ee7a n\u00f3.&nbsp;<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.main-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;position: absolute;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;left: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;bottom: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color: yellow;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.parent-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;position: relative;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;height: 100px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;background-color: #81adc8;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.sibling-element {<\/span>\n\n<span style=\"font-weight: 400;\">background: #f2f2f2;<\/span>\n<span style=\"font-weight: 400;\">padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #81adc8;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"118\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-3-vippro-2.png\" alt=\"\" class=\"wp-image-68546\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-3-vippro-2.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-3-vippro-2-300x55.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-3-vippro-2-200x37.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-vd-3-vippro-2-100x18.png 100w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>Ph\u1ea7n t\u1eed ch\u00ednh \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb t\u01b0\u01a1ng \u1ee9ng (relative) v\u1edbi ph\u1ea7n t\u1eed cha. H\u00e3y l\u01b0u \u00fd \u0111i\u1ec1u n\u00e0y khi ch\u00fang ta chuy\u1ec3n sang gi\u00e1 tr\u1ecb ti\u1ebfp theo.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 x\u00e1c \u0111\u1ecbnh th\u1ee9 t\u1ef1 s\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed ch\u1ed3ng l\u1ea5p l\u00ean nhau, c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb b\u1eb1ng <strong>position: absolute<\/strong>, <strong>position: fixed<\/strong> ho\u1eb7c <strong>position: relative<\/strong> th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng k\u1ebft h\u1ee3p v\u1edbi thu\u1ed9c t\u00ednh z-index. Thu\u1ed9c t\u00ednh n\u00e0y quy \u0111\u1ecbnh ph\u1ea7n t\u1eed n\u00e0o s\u1ebd hi\u1ec3n th\u1ecb \u1edf ph\u00eda tr\u01b0\u1edbc v\u00e0 ph\u1ea7n t\u1eed n\u00e0o s\u1ebd b\u1ecb che khu\u1ea5t trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb z-index c\u00e0ng cao, ph\u1ea7n t\u1eed \u0111\u00f3 c\u00e0ng hi\u1ec3n th\u1ecb \u1edf ph\u00eda tr\u01b0\u1edbc. Trong tr\u01b0\u1eddng h\u1ee3p c\u00f3 nhi\u1ec1u ph\u1ea7n t\u1eed ch\u1ed3ng l\u1ea5p nhau c\u00f3 c\u00f9ng z-index, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh CSS kh\u00e1c nh\u01b0 top, left, bottom v\u00e0 right \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed c\u1ee7a ch\u00fang.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-position-fixed\"><b>position: fixed<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c ph\u1ea7n t\u1eed<strong> position: fixed<\/strong> c\u00f3 m\u1ed9t s\u1ed1 \u0111i\u1ec3m gi\u1ed1ng v\u1edbi c\u00e1c ph\u1ea7n t\u1eed <strong>position: absolute<\/strong>. \u0110i\u1ec3m chung nh\u1ea5t l\u00e0 ch\u00fang \u0111\u1ec1u b\u1ecb lo\u1ea1i kh\u1ecfi lu\u1ed3ng b\u00ecnh th\u01b0\u1eddng (normal flow) c\u1ee7a t\u00e0i li\u1ec7u.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong khi \u0111\u00f3, khi so s\u00e1nh v\u1edbi <strong>position: absolute<\/strong> th\u00ec c\u00e1c ph\u1ea7n t\u1eed c\u00f3 <strong>position: fixed<\/strong> s\u1ebd \u0111\u01b0\u1ee3c c\u1ed1 \u0111\u1ecbnh so v\u1edbi viewport n\u00ean kh\u00f4ng b\u1ecb \u1ea3nh h\u01b0\u1edfng b\u1edfi vi\u1ec7c cu\u1ed9n trang. Ch\u00fang lu\u00f4n gi\u1eef nguy\u00ean v\u1ecb tr\u00ed tr\u00ean m\u00e0n h\u00ecnh, \u0111i\u1ec1u n\u00e0y r\u1ea5t h\u1eefu \u00edch cho c\u00e1c thanh \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 c\u00e1c ph\u1ea7n t\u1eed c\u1ea7n hi\u1ec3n th\u1ecb li\u00ean t\u1ee5c tr\u00ean m\u00e0n h\u00ecnh.&nbsp;<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.sibling-element {<\/span>\n\n<span style=\"font-weight: 400;\">background: #f2f2f2;<\/span>\n<span style=\"font-weight: 400;\">padding: 10px;<\/span>\n<span style=\"font-weight: 400;\">border: 1px solid #81adc8;<\/span>\n\n<span style=\"font-weight: 400;\">}&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">.main-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;position: fixed;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;bottom: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;left: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color: yellow;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.parent-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;position: relative;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;height: 100px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;background-color: #81adc8;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">html {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;height: 800px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e3y xem h\u00ecnh v\u00ed d\u1ee5 \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n. <\/span>V\u1ecb tr\u00ed c\u00e1c ph\u1ea7n t\u1eed ban \u0111\u1ea7u:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1472\" height=\"496\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-1-vippro.png\" alt=\"\" class=\"wp-image-68547\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-1-vippro.png 1472w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-1-vippro-300x101.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-1-vippro-700x236.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-1-vippro-200x67.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-1-vippro-100x34.png 100w\" sizes=\"auto, (max-width: 1472px) 100vw, 1472px\" \/><\/figure>\n\n\n\n<p>V\u1ecb tr\u00ed c\u00e1c ph\u1ea7n t\u1eed khi cu\u1ed9n trang l\u00ean tr\u00ean:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1474\" height=\"524\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-2-vippro.png\" alt=\"\" class=\"wp-image-68548\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-2-vippro.png 1474w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-2-vippro-300x107.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-2-vippro-700x249.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-2-vippro-200x71.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-fixed-2-vippro-100x36.png 100w\" sizes=\"auto, (max-width: 1474px) 100vw, 1474px\" \/><\/figure>\n\n\n\n<p>Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, ph\u1ea7n t\u1eed ch\u00ednh \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb t\u01b0\u01a1ng \u1ee9ng (relative) v\u1edbi ph\u1ea7n t\u1eed &lt;html&gt;. Khi cu\u1ed9n trang l\u00ean tr\u00ean th\u00ec ph\u1ea7n t\u1eed \u0111\u00f3 v\u1eabn \u0111\u01b0\u1ee3c c\u1ed1 \u0111\u1ecbnh tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Xem th\u00eam Vi\u1ec7c l\u00e0m <strong><a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ha-noi?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=position_css\" target=\"_blank\" rel=\"noreferrer noopener\">L\u1eadp tr\u00ecnh vi\u00ean Front-End<\/a><\/strong> t\u1ea1i TP. H\u1ed3 Ch\u00ed Minh<br>Xem th\u00eam Vi\u1ec7c l\u00e0m <strong><a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ho-chi-minh-hcm?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=position_css\" target=\"_blank\" rel=\"noreferrer noopener\">L\u1eadp tr\u00ecnh vi\u00ean Front-End<\/a><\/strong> t\u1ea1i H\u00e0 N\u1ed9i<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-position-sticky\"><b>position: sticky<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\"><strong>Position: sticky<\/strong> l\u00e0 s\u1ef1 k\u1ebft h\u1ee3p gi\u1eefa <strong>position: relative<\/strong> v\u00e0 <strong>position: fixed<\/strong>. <\/span><span style=\"font-weight: 400;\">C\u00e1c ph\u1ea7n t\u1eed c\u00f3 <strong>position: sticky<\/strong> \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb d\u1ef1a tr\u00ean thao t\u00e1c cu\u1ed9n c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u1ed9t ph\u1ea7n t\u1eed c\u00f3 <strong>position: sticky<\/strong> s\u1ebd tu\u00e2n theo lu\u1ed3ng b\u00ecnh th\u01b0\u1eddng (t\u00ednh ch\u1ea5t c\u1ee7a <strong>position:relative<\/strong>) cho \u0111\u1ebfn khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n trang \u0111\u1ebfn m\u1ed9t \u0111i\u1ec3m nh\u1ea5t \u0111\u1ecbnh trong viewport, l\u00fac \u0111\u00f3 ph\u1ea7n t\u1eed s\u1ebd c\u1ed1 \u0111\u1ecbnh t\u1ea1i v\u1ecb tr\u00ed \u0111\u00f3 trong khi cu\u1ed9n (t\u00ednh ch\u1ea5t c\u1ee7a <strong>position:fixed<\/strong>).<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.sibling-element {<\/span>\n\n<span style=\"font-weight: 400;\">background: #f2f2f2;<\/span>\n<span style=\"font-weight: 400;\">padding: 10px;<\/span>\n<span style=\"font-weight: 400;\">border: 1px solid #81adc8;<\/span>\n\n<span style=\"font-weight: 400;\">}&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">.main-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;position: sticky;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;top: 10px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;background-color: yellow;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.parent-element {<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;position: relative;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;height: 800px;<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;padding: 50px 10px;<\/span>\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;background-color: #81adc8;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00e3y xem h\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3 \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n. V\u1ecb tr\u00ed c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed ban \u0111\u1ea7u:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1492\" height=\"536\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-1-vippro.png\" alt=\"\" class=\"wp-image-68543\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-1-vippro.png 1492w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-1-vippro-300x108.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-1-vippro-700x251.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-1-vippro-200x72.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-1-vippro-100x36.png 100w\" sizes=\"auto, (max-width: 1492px) 100vw, 1492px\" \/><\/figure>\n\n\n\n<p>V\u1ecb tr\u00ed c\u00e1c ph\u1ea7n t\u1eed khi cu\u1ed9n trang l\u00ean tr\u00ean:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1448\" height=\"540\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky2-vippro.png\" alt=\"\" class=\"wp-image-68555\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky2-vippro.png 1448w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky2-vippro-300x112.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky2-vippro-700x261.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky2-vippro-200x75.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky2-vippro-100x37.png 100w\" sizes=\"auto, (max-width: 1448px) 100vw, 1448px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1482\" height=\"538\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-3-vippro.png\" alt=\"\" class=\"wp-image-68545\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-3-vippro.png 1482w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-3-vippro-300x109.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-3-vippro-700x254.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-3-vippro-200x73.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/position-css-sticky-3-vippro-100x36.png 100w\" sizes=\"auto, (max-width: 1482px) 100vw, 1482px\" \/><\/figure>\n\n\n\n<p>C\u00f3 th\u1ec3 th\u1ea5y, ph\u1ea7n t\u1eed v\u1edbi <strong>position: sticky<\/strong> ho\u1ea1t \u0111\u1ed9ng nh\u01b0 m\u1ed9t ph\u1ea7n t\u1eed relative cho \u0111\u1ebfn khi n\u00f3 \u0111\u1ea1t \u0111\u1ebfn m\u1ed9t \u0111i\u1ec3m c\u1ee5 th\u1ec3 tr\u00ean m\u00e0n h\u00ecnh (v\u00ed d\u1ee5 top: 10px). Sau khi v\u01b0\u1ee3t qua \u0111i\u1ec3m \u0111\u00f3, n\u00f3 s\u1ebd b\u1eaft \u0111\u1ea7u ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nh\u01b0 m\u1ed9t ph\u1ea7n t\u1eed fixed, ngh\u0129a l\u00e0 n\u00f3 \u0111\u01b0\u1ee3c c\u1ed1 \u0111\u1ecbnh \u1edf m\u1ed9t v\u1ecb tr\u00ed c\u1ee5 th\u1ec3 tr\u00ean m\u00e0n h\u00ecnh khi b\u1ea1n cu\u1ed9n trang.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-s\u1ef1-khac-bi\u1ec7t-gi\u1eefa-cac-gia-tr\u1ecb-relative-absolute-fixed\"><span class=\"ez-toc-section\" id=\"Su_khac_biet_giua_cac_gia_tri_Relative_Absolute_Fixed\"><\/span><b>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa c\u00e1c gi\u00e1 tr\u1ecb Relative, Absolute, Fixed<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>Lo\u1ea1i \u0111\u1ecbnh v\u1ecb<\/b><\/td><td><b>\u0110\u1eb7c \u0111i\u1ec3m<\/b><\/td><td><b>S\u1ef1 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn lu\u1ed3ng trang<\/b><\/td><td><b>C\u00e1c tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Relative<\/span><\/td><td><span style=\"font-weight: 400;\">\u0110\u1ecbnh v\u1ecb t\u01b0\u01a1ng \u0111\u1ed1i so v\u1edbi ch\u00ednh n\u00f3. N\u1ebfu kh\u00f4ng c\u00f3 c\u00e1c thu\u1ed9c t\u00ednh \u0111\u1ecbnh v\u1ecb kh\u00e1c (top, bottom, left, right), ph\u1ea7n t\u1eed v\u1eabn gi\u1eef nguy\u00ean v\u1ecb tr\u00ed ban \u0111\u1ea7u. N\u1ebfu c\u00f3, ph\u1ea7n t\u1eed s\u1ebd di chuy\u1ec3n d\u1ef1a tr\u00ean v\u1ecb tr\u00ed ban \u0111\u1ea7u.<\/span><\/td><td><span style=\"font-weight: 400;\">\u1ea2nh h\u01b0\u1edfng \u0111\u1ebfn ch\u00ednh n\u00f3 nh\u01b0ng kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c.<\/span><\/td><td><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng \u0111\u1ec3 tinh ch\u1ec9nh v\u1ecb tr\u00ed c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed so v\u1edbi v\u1ecb tr\u00ed ban \u0111\u1ea7u c\u1ee7a n\u00f3 ho\u1eb7c \u0111\u1ec3 \u0111\u1ecbnh v\u1ecb tuy\u1ec7t \u0111\u1ed1i c\u00e1c ph\u1ea7n t\u1eed con b\u00ean trong.<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Absolute<\/span><\/td><td><span style=\"font-weight: 400;\">\u0110\u1ecbnh v\u1ecb tuy\u1ec7t \u0111\u1ed1i so v\u1edbi ph\u1ea7n t\u1eed cha g\u1ea7n nh\u1ea5t \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb t\u01b0\u01a1ng \u0111\u1ed1i ho\u1eb7c tuy\u1ec7t \u0111\u1ed1i, ho\u1eb7c so v\u1edbi ph\u1ea7n t\u1eed &lt;html&gt; n\u1ebfu kh\u00f4ng c\u00f3 ph\u1ea7n t\u1eed cha nh\u01b0 v\u1eady.<\/span><\/td><td><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed b\u1ecb lo\u1ea1i b\u1ecf kh\u1ecfi lu\u1ed3ng trang.<\/span><\/td><td><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng khi c\u1ea7n ki\u1ec3m so\u00e1t ch\u00ednh x\u00e1c v\u1ecb tr\u00ed c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed, nh\u01b0 t\u1ea1o l\u1edbp ph\u1ee7 ho\u1eb7c c\u1eeda s\u1ed5 b\u1eadt l\u00ean.<\/span><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">Fixed<\/span><\/td><td><span style=\"font-weight: 400;\">\u0110\u1ecbnh v\u1ecb c\u1ed1 \u0111\u1ecbnh so v\u1edbi khung nh\u00ecn c\u1ee7a tr\u00ecnh duy\u1ec7t, ngh\u0129a l\u00e0 ph\u1ea7n t\u1eed s\u1ebd gi\u1eef nguy\u00ean v\u1ecb tr\u00ed ngay c\u1ea3 khi trang \u0111\u01b0\u1ee3c cu\u1ed9n.<\/span><\/td><td><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed b\u1ecb lo\u1ea1i b\u1ecf kh\u1ecfi lu\u1ed3ng trang.<\/span><\/td><td><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng cho thanh \u0111i\u1ec1u h\u01b0\u1edbng ho\u1eb7c ph\u1ea7n t\u1eed b\u1ea1n mu\u1ed1n gi\u1eef hi\u1ec3n th\u1ecb m\u1ecdi l\u00fac. C\u1ea7n ch\u00fa \u00fd tr\u00e1nh ch\u1ed3ng l\u1ea5p n\u1ed9i dung.<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-position-css\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Position_CSS\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Position CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-v\u1ecb-tri-nao-khong-b\u1ecb-\u1ea3nh-h\u01b0\u1edfng-b\u1edfi-top-trong-css\"><b>V\u1ecb tr\u00ed n\u00e0o kh\u00f4ng b\u1ecb \u1ea3nh h\u01b0\u1edfng b\u1edfi top trong CSS?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong CSS, thu\u1ed9c t\u00ednh top kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1c ph\u1ea7n t\u1eed c\u00f3 thu\u1ed9c t\u00ednh \u0111\u1ecbnh v\u1ecb static, v\u00ec static l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh cho t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed v\u00e0 ch\u00fang tu\u00e2n theo lu\u1ed3ng t\u00e0i li\u1ec7u t\u1ef1 nhi\u00ean m\u00e0 kh\u00f4ng b\u1ecb thay \u0111\u1ed5i b\u1edfi c\u00e1c thu\u1ed9c t\u00ednh \u0111\u1ecbnh v\u1ecb kh\u00e1c.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-position-sticky-khong-ho\u1ea1t-d\u1ed9ng\"><b>T\u1ea1i sao position: sticky kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">CSS position: sticky c\u00f3 th\u1ec3 kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng v\u00ec nhi\u1ec1u l\u00fd do:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>C\u00fa ph\u00e1p CSS kh\u00f4ng \u0111\u00fang:<\/b><span style=\"font-weight: 400;\"> \u0110\u1ea3m b\u1ea3o vi\u1ebft \u0111\u00fang c\u00fa ph\u00e1p v\u00e0 s\u1eed d\u1ee5ng selector CSS cho \u0111\u00fang ph\u1ea7n t\u1eed c\u1ea7n \u0111\u1ecbnh d\u1ea1ng.<\/span><\/li>\n\n\n\n<li><b>Tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3:<\/b><span style=\"font-weight: 400;\"> Ki\u1ec3m tra xem tr\u00ecnh duy\u1ec7t b\u1ea1n \u0111ang d\u00f9ng c\u00f3 h\u1ed7 tr\u1ee3 position: sticky kh\u00f4ng. B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o trang web <a href=\"https:\/\/caniuse.com\/?search=position:sticky\" target=\"_blank\" rel=\"noopener\">Can I Use <\/a><\/span><span style=\"font-weight: 400;\">\u0111\u1ec3 bi\u1ebft chi ti\u1ebft. N\u1ebfu c\u1ea7n h\u1ed7 tr\u1ee3 c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169, h\u00e3y c\u00e2n nh\u1eafc d\u00f9ng gi\u1ea3i ph\u00e1p thay th\u1ebf nh\u01b0 th\u01b0 vi\u1ec7n JavaScript.<\/span><\/li>\n\n\n\n<li><b>Chi\u1ec1u cao ho\u1eb7c chi\u1ec1u r\u1ed9ng kh\u00f4ng \u0111\u1ee7: <\/b><span style=\"font-weight: 400;\">C\u00e1c ph\u1ea7n t\u1eed v\u1edbi position: sticky c\u1ea7n c\u00f3 chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh c\u1ee5 th\u1ec3. N\u1ebfu kh\u00f4ng c\u00f3 nh\u1eefng k\u00edch th\u01b0\u1edbc n\u00e0y, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 kh\u00f4ng x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c khi n\u00e0o \u0111\u1ec3 chuy\u1ec3n t\u1eeb v\u1ecb tr\u00ed b\u00ecnh th\u01b0\u1eddng sang v\u1ecb tr\u00ed sticky.\u00a0<\/span><\/li>\n\n\n\n<li><b>C\u00e1c ph\u1ea7n t\u1eed c\u00f3 position: sticky l\u1ed3ng nhau<\/b><span style=\"font-weight: 400;\">: S\u1eed d\u1ee5ng nhi\u1ec1u ph\u1ea7n t\u1eed c\u00f3 position: sticky c\u00f9ng l\u00fac trong m\u1ed9t v\u00f9ng ch\u1ee9a ho\u1eb7c c\u00e1c v\u00f9ng ch\u1ee9a l\u1ed3ng nhau c\u00f3 th\u1ec3 khi\u1ebfn c\u00e1c ph\u1ea7n t\u1eed xung \u0111\u1ed9t v\u1edbi nhau.<\/span><\/li>\n\n\n\n<li><b>Scroll container kh\u00f4ng \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp:<\/b><span style=\"font-weight: 400;\"> N\u1ebfu scroll container kh\u00f4ng \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp ch\u00ednh x\u00e1c, c\u00e1c ph\u1ea7n t\u1eed c\u00f3 position: sticky c\u00f3 th\u1ec3 kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng nh\u01b0 mong \u0111\u1ee3i.<\/span><\/li>\n\n\n\n<li><b>Z-index v\u00e0 ng\u1eef c\u1ea3nh x\u1ebfp ch\u1ed3ng (stacking context)<\/b><span style=\"font-weight: 400;\">: Thu\u1ed9c t\u00ednh z-index v\u00e0 ng\u1eef c\u1ea3nh x\u1ebfp ch\u1ed3ng c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1c ph\u1ea7n t\u1eed v\u1edbi position: sticky. N\u1ebfu c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c trong c\u00f9ng ng\u1eef c\u1ea3nh x\u1ebfp ch\u1ed3ng c\u00f3 gi\u00e1 tr\u1ecb z-index cao h\u01a1n, ph\u1ea7n t\u1eed c\u00f3 position: sticky c\u00f3 th\u1ec3 xu\u1ea5t hi\u1ec7n ph\u00eda sau ch\u00fang ho\u1eb7c kh\u00f4ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb.<\/span><\/li>\n\n\n\n<li><b>Scroll container b\u1ecb tr\u00e0n:<\/b><span style=\"font-weight: 400;\"> N\u1ebfu n\u1ed9i dung b\u00ean trong scroll container b\u1ecb tr\u00e0n v\u01b0\u1ee3t qu\u00e1 k\u00edch th\u01b0\u1edbc c\u1ee7a v\u00f9ng ch\u1ee9a, ph\u1ea7n t\u1eed c\u00f3 position: sticky c\u00f3 th\u1ec3 kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng nh\u01b0 mong \u0111\u1ee3i.\u00a0<\/span><\/li>\n\n\n\n<li><b>C\u00e1c hi\u1ec7u \u1ee9ng CSS kh\u00e1c<\/b><span style=\"font-weight: 400;\">: C\u00e1c hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed5i (transform) v\u00e0 \u0111\u1ed9 m\u1edd (opacity) \u00e1p d\u1ee5ng cho ph\u1ea7n t\u1eed ho\u1eb7c v\u00f9ng ch\u1ee9a cha c\u1ee7a n\u00f3 c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn position: sticky.<\/span><\/li>\n\n\n\n<li><b>Xung \u0111\u1ed9t v\u1edbi CSS Grid ho\u1eb7c Flexbox<\/b><span style=\"font-weight: 400;\">: S\u1eed d\u1ee5ng position: sticky trong b\u1ed1 c\u1ee5c CSS Grid ho\u1eb7c Flexbox c\u00f3 th\u1ec3 g\u00e2y ra v\u1ea5n \u0111\u1ec1.<\/span><\/li>\n\n\n\n<li><b>Thi\u1ebfu s\u1ef1 ch\u1ec9 \u0111\u1ecbnh c\u1ee7a m\u1ed9t trong c\u00e1c gi\u00e1 tr\u1ecb top, bottom, left, right:<\/b><span style=\"font-weight: 400;\"> Position: sticky c\u1ea7n \u00edt nh\u1ea5t 1 trong 4 thu\u1ed9c t\u00ednh \u0111\u00f3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a \u0111\u1ec3 c\u00f3 th\u1ec3 ho\u1ea1t \u0111\u1ed9ng.<\/span><\/li>\n\n\n\n<li><b>Ph\u1ea7n t\u1eed position:<\/b> <b>sticky<\/b><span style=\"font-weight: 400;\"> d\u00ednh v\u1edbi ph\u1ea7n t\u1eed cha c\u00f3 thu\u1ed9c t\u00ednh overflow kh\u00f4ng ph\u1ea3i l\u00e0 visible. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 ng\u0103n position: sticky ho\u1ea1t \u0111\u1ed9ng.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1ef1-khac-nhau-gi\u1eefa-margin-va-position-css-la-gi\"><b>S\u1ef1 kh\u00e1c nhau gi\u1eefa margin v\u00e0 position CSS l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong CSS, margin v\u00e0 position c\u00f3 m\u1ee5c \u0111\u00edch v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng kh\u00e1c nhau. Margin t\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa ph\u1ea7n t\u1eed v\u00e0 c\u00e1c ph\u1ea7n t\u1eed xung quanh, gi\u00fap t\u1ea1o kho\u1ea3ng tr\u1ed1ng b\u00ean ngo\u00e0i ph\u1ea7n t\u1eed. N\u00f3 kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed trong d\u00f2ng t\u00e0i li\u1ec7u.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong khi \u0111\u00f3, position ki\u1ec3m so\u00e1t v\u1ecb tr\u00ed c\u1ee5 th\u1ec3 c\u1ee7a ph\u1ea7n t\u1eed trong t\u00e0i li\u1ec7u v\u1edbi c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 static, relative, absolute, fixed, v\u00e0 sticky. \u0110i\u1ec1u n\u00e0y cho ph\u00e9p b\u1ea1n ki\u1ec3m so\u00e1t c\u00e1ch c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c t\u01b0\u01a1ng t\u00e1c v\u1edbi ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft-position-css\"><span class=\"ez-toc-section\" id=\"Tong_ket_position_CSS\"><\/span><b>T\u1ed5ng k\u1ebft position CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">N\u1eafm r\u00f5 thu\u1ed9c t\u00ednh position CSS l\u00e0 m\u1ed9t k\u1ef9 n\u0103ng thi\u1ebft k\u1ebf web n\u00e2ng cao \u0111\u00f2i h\u1ecfi th\u1eddi gian \u0111\u1ec3 th\u00e0nh th\u1ea1o. Hy v\u1ecdng b\u00e0i vi\u1ebft n\u00e0y c\u1ee7a ITviec \u0111\u00e3 mang \u0111\u1ebfn cho b\u1ea1n ki\u1ebfn th\u1ee9c c\u1ea7n thi\u1ebft. H\u00e3y d\u00e0nh th\u1eddi gian r\u00e8n luy\u1ec7n \u0111\u1ec3 l\u00e0m ch\u1ee7 k\u1ef9 n\u0103ng n\u00e0y!<\/span><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>B\u1ea1n th\u1ea5y b\u00e0i vi\u1ebft hay v\u00e0 h\u1eefu \u00edch? \u0110\u1eebng ng\u1ea1i Share v\u1edbi b\u1ea1n b\u00e8 v\u00e0 \u0111\u1ed3ng nghi\u1ec7p nh\u00e9.<br>V\u00e0 nhanh tay tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/viec-lam-it\/?utm_medium=anchor_text_low&amp;utm_source=blog&amp;utm_campaign=viec_lam_it&amp;utm_content=position_css\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m IT<\/a> \u201cch\u1ea5t\u201d tr\u00ean ITviec!<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Position CSS l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh h\u1ed7 tr\u1ee3 s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c trang web quan tr\u1ecdng. Vi\u1ec7c hi\u1ec3u v\u00e0 \u00e1p d\u1ee5ng position CSS \u0111\u00fang c\u00e1ch c\u00f3 th\u1ec3 l\u00e0m cho c\u00e1c thi\u1ebft k\u1ebf website c\u01a1 b\u1ea3n tr\u1edf n\u00ean tinh t\u1ebf, \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c nhu c\u1ea7u th\u1ecb gi\u00e1c v\u00e0 tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. V\u1eady [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":68671,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-68496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Position CSS l\u00e0 g\u00ec? Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Position CSS l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh h\u1ed7 tr\u1ee3 s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c trang web quan tr\u1ecdng. B\u00e0i vi\u1ebft t\u1ed5ng h\u1ee3p c\u00e1ch d\u00f9ng position CSS th\u01b0\u1eddng th\u1ea5y.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/position-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Position CSS l\u00e0 g\u00ec? Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS\" \/>\n<meta property=\"og:description\" content=\"Position CSS l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh h\u1ed7 tr\u1ee3 s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c trang web quan tr\u1ecdng. Vi\u1ec7c hi\u1ec3u v\u00e0 \u00e1p d\u1ee5ng position CSS \u0111\u00fang c\u00e1ch c\u00f3 th\u1ec3 l\u00e0m cho c\u00e1c\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/position-css\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-15T01:52:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-20T12:41:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-position-css-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2112\" \/>\n\t<meta property=\"og:image:height\" content=\"1112\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Position CSS l\u00e0 g\u00ec? Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS - ITviec Blog","description":"Position CSS l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh h\u1ed7 tr\u1ee3 s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c trang web quan tr\u1ecdng. B\u00e0i vi\u1ebft t\u1ed5ng h\u1ee3p c\u00e1ch d\u00f9ng position CSS th\u01b0\u1eddng th\u1ea5y.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/position-css\/","og_locale":"vi_VN","og_type":"article","og_title":"Position CSS l\u00e0 g\u00ec? Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS","og_description":"Position CSS l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh h\u1ed7 tr\u1ee3 s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c trang web quan tr\u1ecdng. Vi\u1ec7c hi\u1ec3u v\u00e0 \u00e1p d\u1ee5ng position CSS \u0111\u00fang c\u00e1ch c\u00f3 th\u1ec3 l\u00e0m cho c\u00e1c","og_url":"https:\/\/itviec.com\/blog\/position-css\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-05-15T01:52:55+00:00","article_modified_time":"2025-07-20T12:41:27+00:00","og_image":[{"width":2112,"height":1112,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-position-css-vippro.jpg","type":"image\/jpeg"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"13 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/position-css\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/position-css\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"Position CSS l\u00e0 g\u00ec? Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS","datePublished":"2024-05-15T01:52:55+00:00","dateModified":"2025-07-20T12:41:27+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/position-css\/"},"wordCount":3061,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/position-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-position-css-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/position-css\/","url":"https:\/\/itviec.com\/blog\/position-css\/","name":"Position CSS l\u00e0 g\u00ec? Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/position-css\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/position-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-position-css-vippro.jpg","datePublished":"2024-05-15T01:52:55+00:00","dateModified":"2025-07-20T12:41:27+00:00","description":"Position CSS l\u00e0 m\u1ed9t trong nh\u1eefng thu\u1ed9c t\u00ednh h\u1ed7 tr\u1ee3 s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c trang web quan tr\u1ecdng. B\u00e0i vi\u1ebft t\u1ed5ng h\u1ee3p c\u00e1ch d\u00f9ng position CSS th\u01b0\u1eddng th\u1ea5y.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/position-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/position-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/position-css\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-position-css-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-position-css-vippro.jpg","width":2112,"height":1112,"caption":"position css"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/position-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Position CSS l\u00e0 g\u00ec? Hi\u1ec3u r\u00f5 5 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh Position CSS"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/68496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=68496"}],"version-history":[{"count":2,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/68496\/revisions"}],"predecessor-version":[{"id":89719,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/68496\/revisions\/89719"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/68671"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=68496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=68496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=68496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}