{"id":28626,"date":"2021-07-28T12:28:17","date_gmt":"2021-07-28T05:28:17","guid":{"rendered":"https:\/\/wiki.tino.org\/staging\/?p=28626"},"modified":"2021-07-30T12:59:50","modified_gmt":"2021-07-30T05:59:50","slug":"position-trong-css-la-gi","status":"publish","type":"post","link":"https:\/\/tino.vn\/blog\/position-trong-css-la-gi\/","title":{"rendered":"Position trong CSS l\u00e0 g\u00ec? Gi\u1ea3i th\u00edch 5 thu\u1ed9c t\u00ednh Position trong CSS"},"content":{"rendered":"\n<p><strong>N\u1ebfu b\u1ea1n \u0111ang h\u1ecdc c\u00e1ch s\u1eed d\u1ee5ng CSS cho trang web c\u1ee7a m\u00ecnh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Position trong CSS \u0111\u1ec3 thi\u1ebft k\u1ebf <a href=\"https:\/\/tino.vn\/blog\/layout-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">layout<\/a> c\u1ee7a b\u1ea1n tr\u00f4ng th\u1eadt \u0111\u1eb9p m\u1eaft. V\u1eady, <strong>Position trong CSS l\u00e0 g\u00ec? Tino Group s\u1ebd gi\u1ea3i \u0111\u00e1p gi\u00fap b\u1ea1n c\u0169ng v\u1edbi nh\u1eefng v\u00ed d\u1ee5 tr\u1ef1c quan b\u1eb1ng code v\u00e0 h\u00ecnh \u1ea3nh \u0111\u1ec3 b\u1ea1n th\u1ea5y lu\u00f4n nh\u00e9!<\/strong><\/strong><\/p>\n\n\n\n<h2 id=\"Position_trong_CSS_l\u00e0_g\u00ec?\"><a id=\"post-28626-_1h2yavcvzfxc\"><\/a><strong>Position trong CSS l\u00e0 g\u00ec?<\/strong><\/h2>\n\n\n\n<p><strong>Position trong CSS<\/strong> \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ecbnh v\u1ecb v\u1ecb tr\u00ed hi\u1ec3n th\u1ecb c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed th\u1ebb <a href=\"https:\/\/tino.vn\/blog\/html-css-javascript-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a> v\u00e0 th\u01b0\u1eddng s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e2y d\u1ef1ng CSS cho menu nhi\u1ec1u c\u1ea5p, tooltip v\u00e0 m\u1ed9t s\u1ed1 ch\u1ee9c n\u0103ng kh\u00e1c li\u00ean quan \u0111\u1ebfn v\u1ecb tr\u00ed.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1467.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28628\" width=\"566\" height=\"338\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1467.png 528w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1467-300x180.png 300w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/figure><\/div>\n\n\n\n<h3 id=\"C\u00e1c_v\u1ecb_tr\u00ed_trong_Position\"><a id=\"post-28626-_m9bbgptghdm4\"><\/a><strong>C\u00e1c v\u1ecb tr\u00ed trong Position<\/strong><\/h3>\n\n\n\n<p>C\u00e1c v\u1ecb tr\u00ed tr\u00ean 1 m\u1eb7t ph\u1eb3ng nh\u01b0 b\u1ea1n \u0111\u00e3 bi\u1ebft bao g\u1ed3m 4 v\u1ecb tr\u00ed ch\u00ednh: tr\u00ean, d\u01b0\u1edbi, tr\u00e1i, ph\u1ea3i t\u01b0\u01a1ng \u1ee9ng ta s\u1ebd c\u00f3 c\u00e1c v\u1ecb tr\u00ed Position nh\u01b0 sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Top &#8211; tr\u00ean<\/strong><\/li><li><strong>Bottom &#8211; d\u01b0\u1edbi<\/strong><\/li><li><strong>Left &#8211; tr\u00e1i<\/strong><\/li><li><strong>Right &#8211; ph\u1ea3i<\/strong><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1468.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28629\" width=\"527\" height=\"395\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1468.png 512w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1468-300x225.png 300w\" sizes=\"(max-width: 527px) 100vw, 527px\" \/><\/figure><\/div>\n\n\n\n<p>T\u1ea5t nhi\u00ean, \u0111\u00e2y ch\u1ec9 l\u00e0 nh\u1eefng v\u1ecb tr\u00ed c\u01a1 b\u1ea3n nh\u1ea5t, khi th\u1ef1c hi\u1ec7n 1 layout, b\u1ea1n s\u1ebd ph\u1ea3i c\u0103ng ch\u1ec9nh v\u1ecb tr\u00ed nhi\u1ec1u h\u01a1n nhi\u1ec1u b\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p c\u00f9ng c\u00e1c thu\u1ed9c t\u00ednh Position trong CSS kh\u00e1c v\u00ed d\u1ee5 nh\u01b0 trong \u1ea3nh:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1469.png\" alt=\"\" class=\"wp-image-28630\" width=\"558\" height=\"349\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1469.png 400w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1469-300x188.png 300w\" sizes=\"(max-width: 558px) 100vw, 558px\" \/><\/figure><\/div>\n\n\n\n<p>\u0110\u1ec3 hi\u1ec3u m\u1ed9t c\u00e1ch tr\u1ef1c quan h\u01a1n, b\u1ea1n n\u00ean th\u1ef1c h\u00e0nh. N\u1ebfu b\u1ea1n ng\u1ea1i code l\u1ea1i t\u1eeb \u0111\u1ea7u, b\u1ea1n c\u00f3 th\u1ec3 truy c\u1eadp v\u00e0o <a href=\"https:\/\/codepen.io\/evondev\/pen\/BGNwNr\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">link n\u00e0y<\/a> v\u00e0 th\u1ef1c h\u00e0nh ch\u1ec9nh s\u1eeda c\u00e1c th\u00f4ng s\u1ed1, v\u1ecb tr\u00ed c\u1ee7a kh\u1ed1i vu\u00f4ng nh\u00e9!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1470.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28631\" width=\"551\" height=\"501\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1470.png 820w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1470-300x273.png 300w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1470-768x698.png 768w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/figure><\/div>\n\n\n\n<h3 id=\"5_gi\u00e1_tr\u1ecb_thu\u1ed9c_t\u00ednh_c\u01a1_b\u1ea3n_c\u1ee7a_Position_trong_CSS\"><a id=\"post-28626-_18qy75r08s02\"><\/a><strong>5 gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh c\u01a1 b\u1ea3n c\u1ee7a Position trong CSS<\/strong><\/h3>\n\n\n\n<p>Th\u00f4ng th\u01b0\u1eddng ch\u00fang ta s\u1ebd c\u00f3 4 thu\u1ed9c t\u00ednh ch\u00ednh bao g\u1ed3m: static, relative, fixed v\u00e0 absolute. Ngo\u00e0i ra b\u1ea1n s\u1ebd th\u1ea5y th\u00eam c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0: sticky v\u00e0 2 thu\u1ed9c t\u00ednh kh\u00e1 th\u00fa v\u1ecb kh\u00e1c l\u00e0 initial, inherit.<\/p>\n\n\n\n<p>Trong b\u00e0i vi\u1ebft, Tino Group ch\u1ec9 \u0111\u00e0o s\u00e2u gi\u1edbi thi\u1ec7u v\u1ec1 5 thu\u1ed9c t\u00ednh: static, relative, fixed, absolute v\u00e0 sticky nh\u00e9!<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Position static: <\/strong>v\u1ecb tr\u00ed\/t\u0129nh m\u1eb7c \u0111\u1ecbnh c\u1ee7a ph\u1ea7n t\u1eed v\u00e0 b\u1ea1n \u0111\u1eb7t \u0111\u00e2u ph\u1ea7n t\u1eed s\u1ebd n\u1eb1m \u1edf \u0111\u00f3.<\/li><li><strong>Position relative: <\/strong>v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed s\u1ebd t\u01b0\u01a1ng \u0111\u1ed1i so v\u1edbi v\u1ecb tr\u00ed t\u0129nh b\u1ea1n \u0111\u1eb7t v\u00e0 kho\u1ea3n kh\u00f4ng gian xung quanh ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c gi\u1eef nguy\u00ean.<\/li><li><strong>Position fixed: <\/strong>v\u1ecb tr\u00ed s\u1ebd n\u1eb1m c\u1ed1 \u0111\u1ecbnh m\u1ed9t ch\u1ed7, d\u00f9 b\u1ea1n c\u00f3 l\u00e0m g\u00ec, ph\u1ea7n t\u1eed v\u1eabn n\u1eb1m c\u1ed1 \u0111\u1ecbnh 1 v\u1ecb tr\u00ed tr\u00ean m\u00e0n h\u00ecnh.<\/li><li><strong>Position absolute: <\/strong>v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh t\u1eeb padding c\u1ee7a ph\u1ea7n t\u1eed cha.<\/li><li><strong>Position sticky: <\/strong>v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb khi ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng thanh cu\u1ed9n.<\/li><\/ul>\n\n\n\n<h2 id=\"Gi\u1ea3i_th\u00edch_chi_ti\u1ebft_c\u00e1c_gi\u00e1_tr\u1ecb_thu\u1ed9c_t\u00ednh_c\u1ee7a_Position_trong_CSS\"><a id=\"post-28626-_jqge5wslt6o\"><\/a><strong>Gi\u1ea3i th\u00edch chi ti\u1ebft c\u00e1c gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh c\u1ee7a Position trong CSS<\/strong><\/h2>\n\n\n\n<p>Vi\u1ec7c gi\u1ea3i th\u00edch s\u01a1 b\u1ed9 v\u1eabn s\u1ebd r\u1ea5t kh\u00f3 \u0111\u1ec3 c\u00f3 th\u1ec3 hi\u1ec3u v\u00e0 t\u01b0\u1edfng t\u01b0\u1ee3ng ra. Sau \u0111\u00e2y, Tino Group s\u1ebd gi\u1ea3i th\u00edch chi ti\u1ebft t\u1eebng gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh c\u00f9ng v\u00ed d\u1ee5 minh h\u1ecda \u0111\u1ec3 b\u1ea1n hi\u1ec3u r\u00f5 v\u00e0 th\u1ef1c h\u00e0nh lu\u00f4n nh\u00e9!<\/p>\n\n\n\n<h3 id=\"Position_static\"><a id=\"post-28626-_uvbhju5pihfy\"><\/a><strong>Position static<\/strong><\/h3>\n\n\n\n<p>Position static hay v\u1ecb tr\u00ed m\u1eb7c \u0111\u1ecbnh, \u0111\u1ed3ng ngh\u0129a v\u1edbi vi\u1ec7c v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed n\u00e0y \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh theo quy t\u1eafc th\u00f4ng th\u01b0\u1eddng c\u1ee7a c\u00e1c t\u00e0i li\u1ec7u.<\/p>\n\n\n\n<p>B\u1ea1n s\u1ebd kh\u00f4ng th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh CSS nh\u01b0: <strong>Top, Bottom, Left, Right<\/strong> \u0111\u1ec3 thi\u1ebft l\u1eadp v\u1ecb tr\u00ed cho ph\u1ea7n t\u1eed \u0111\u00f3.<\/p>\n\n\n\n<p>Code v\u00ed d\u1ee5:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>&lt;div style=&#8221;position:static; border:1px solid; padding:5px;&#8221;&gt;<\/strong><\/p><p><strong> This div element has {position: static};<\/strong><\/p><p><strong>&lt;\/div&gt;<\/strong><\/p><p><strong>&lt;br&gt;<\/strong><\/p><p><strong>&lt;h3&gt;CSS {position:static; left: 50px;}&lt;\/h3&gt;<\/strong><\/p><p><strong>&lt;div style=&#8221;position:static; left: 50px;&#8221;&gt;<\/strong><\/p><p><strong> This div element has {position: static} and {left: 50px}<\/strong><\/p><p><strong>&lt;\/div&gt;<\/strong><\/p><\/blockquote>\n\n\n\n<p>V\u00e0 \u0111\u00e2y l\u00e0 k\u1ebft qu\u1ea3 khi ch\u1ea1y:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"787\" height=\"327\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1471.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28632\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1471.png 787w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1471-300x125.png 300w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1471-768x319.png 768w\" sizes=\"(max-width: 787px) 100vw, 787px\" \/><\/figure><\/div>\n\n\n\n<h3 id=\"Position_relative\"><a id=\"post-28626-_49ve1klp3h7y\"><\/a><strong>Position relative<\/strong><\/h3>\n\n\n\n<p>Ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb b\u1eb1ng Position relative s\u1ebd n\u1eb1m \u1edf v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i so v\u1edbi v\u1ecb tr\u00ed static. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c CSS nh\u01b0: <strong>Top, Bottom, Left, Right <\/strong>\u0111\u1ec3 \u0111\u1ecbnh v\u1ecb v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed \u0111\u00f3.<\/p>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>&lt;h3&gt;{position: relative;}&lt;\/h3&gt;<\/strong><\/p><p><strong>&lt;div style=&#8221;position: relative; width:250px;&#8221;&gt;<\/strong><\/p><p><strong> position: relative; width:250px;<\/strong><\/p><p><strong>&lt;\/div&gt;<\/strong><\/p><p><strong>&lt;br&gt;<\/strong><\/p><p><strong>&lt;h3&gt;{position: relative; left:50px; top:50px;}&lt;\/h3&gt;<\/strong><\/p><p><strong>&lt;div style=&#8221;position: relative; left:50px; top:50px; width:250px;&#8221;&gt;<\/strong><\/p><p><strong> position: relative; width:250px; &lt;br\/&gt;<\/strong><\/p><p><strong> left:50px; top:50px;<\/strong><\/p><p><strong>&lt;\/div&gt;<\/strong><\/p><\/blockquote>\n\n\n\n<p>B\u1ea1n s\u1ebd c\u00f3 k\u1ebft qu\u1ea3 nh\u01b0 sau:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1472.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28633\" width=\"774\" height=\"299\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1472.png 783w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1472-300x116.png 300w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1472-768x297.png 768w\" sizes=\"(max-width: 774px) 100vw, 774px\" \/><\/figure><\/div>\n\n\n\n<p>Khi s\u1eed d\u1ee5ng tr\u00ecnh duy\u1ec7t, b\u1ea1n s\u1ebd th\u1ea5y k\u1ebft qu\u1ea3 nh\u01b0 sau:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"514\" height=\"384\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1473.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28634\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1473.png 514w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1473-300x224.png 300w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><\/figure><\/div>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y r\u00f5 r\u1eb1ng: v\u1ecb tr\u00ed Top v\u00e0 Left c\u1ee7a ph\u1ea7n t\u1eed \u0111\u00e3 b\u1ecb thay \u0111\u1ed5i. Tuy nhi\u00ean, vi\u1ec7c thay \u0111\u1ed5i \u1edf \u0111\u00e2y ch\u1ec9 thay \u0111\u1ed5i v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed ch\u1ee9 kh\u00f4ng l\u00e0m thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed.<\/p>\n\n\n\n<h3 id=\"Position_fixed\"><a id=\"post-28626-_dprqvlt0ym1e\"><\/a><strong>Position fixed<\/strong><\/h3>\n\n\n\n<p>Ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb b\u1eb1ng Position fixed s\u1ebd c\u00f3 v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i so v\u1edbi Viewport tr\u00ean tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n. Nghe c\u00f3 v\u1ebb kh\u00f3 hi\u1ec3u b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o Viewport tr\u00ean tr\u00ecnh duy\u1ec7t Chrome t\u1ea1i \u0111\u00e2y:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"512\" height=\"370\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1474.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28635\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1474.png 512w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1474-300x217.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure><\/div>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>&lt;!DOCTYPE html&gt;<\/strong><\/p><p><strong>&lt;html&gt;<\/strong><\/p><p><strong> &lt;head&gt;<\/strong><\/p><p><strong> &lt;meta charset=&#8221;utf-8&#8243;\/&gt;<\/strong><\/p><p><strong> &lt;title&gt;CSS Position&lt;\/title&gt;<\/strong><\/p><p><strong> &lt;style&gt;<\/strong><\/p><p><strong> div {<\/strong><\/p><p><strong> background-color:yellow;<\/strong><\/p><p><strong> padding: 5px;<\/strong><\/p><p><strong> }<\/strong><\/p><p><strong> &lt;\/style&gt;<\/strong><\/p><p><strong> &lt;\/head&gt;<\/strong><\/p><p><strong> &lt;body&gt;<\/strong><\/p><p><strong> &lt;h2&gt;{position: fixed}&lt;\/h2&gt;<\/strong><\/p><p><strong> &lt;div style=&#8221;position:fixed; bottom:20px; right:15px;&#8221;&gt;<\/strong><\/p><p><strong> position:fixed; bottom:20px; right:15px;<\/strong><\/p><p><strong> &lt;\/div&gt;<\/strong><\/p><p><strong> &lt;p&gt;Content .. 1&lt;\/p&gt;<\/strong><\/p><p><strong> &lt;p&gt;Content .. 2&lt;\/p&gt;<\/strong><\/p><p><strong> &lt;p&gt;Content .. 3&lt;\/p&gt;<\/strong><\/p><p><strong> &lt;p&gt;Content .. 4&lt;\/p&gt;<\/strong><\/p><p><strong> &lt;p&gt;Content .. 5&lt;\/p&gt;<\/strong><\/p><p><strong> &lt;\/body&gt;<\/strong><\/p><p><strong>&lt;\/html&gt;<\/strong><\/p><\/blockquote>\n\n\n\n<p>B\u1ea1n s\u1ebd c\u00f3 \u0111\u01b0\u1ee3c k\u1ebft qu\u1ea3 nh\u01b0 sau:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1475.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28636\" width=\"553\" height=\"359\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1475.png 517w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1475-300x195.png 300w\" sizes=\"(max-width: 553px) 100vw, 553px\" \/><\/figure><\/div>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 thu nh\u1ecf c\u1eeda s\u1ed5 tr\u00ecnh duy\u1ec7t c\u1ee7a m\u00ecnh l\u1ea1i v\u00e0 k\u00e9o ph\u00f3ng to thu nh\u1ecf, b\u1ea1n s\u1ebd th\u1ea5y ph\u1ea7n t\u1eed m\u00e0u v\u00e0ng s\u1ebd thay \u0111\u1ed5i v\u1ecb tr\u00ed theo c\u00e1ch b\u1ea1n thu ph\u00f3ng c\u1eeda s\u1ed5 tr\u00ecnh duy\u1ec7t. M\u1ed9t c\u00e1ch n\u00f3i kh\u00e1c: b\u1ea1n \u0111ang th\u1ef1c hi\u1ec7n neo c\u1ed1 \u0111\u1ecbnh 4 c\u1ea1nh c\u1ee7a ph\u1ea7n t\u1eed v\u1edbi 4 c\u1ea1nh c\u1ee7a tr\u00ecnh duy\u1ec7t b\u1eb1ng d\u00f2ng code:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong> &lt;div style=&#8221;position:fixed; bottom:20px; right:15px;&#8221;&gt;<\/strong><\/p><p><strong> position:fixed; bottom:20px; right:15px;<\/strong><\/p><p><strong> &lt;\/div&gt;<\/strong><\/p><\/blockquote>\n\n\n\n<p>B\u1eb1ng c\u00e1ch n\u00e0y, ph\u1ea7n t\u1eed c\u1ee7a b\u1ea1n s\u1ebd thay \u0111\u1ed5i v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed \u0111\u00f3 d\u1ef1a theo v\u1ecb tr\u00ed c\u1ee7a tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\n<h3 id=\"Position_absolute\"><a id=\"post-28626-_ew43c9cottcu\"><\/a><strong>Position absolute<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb b\u1eb1ng Position absolute, ph\u1ea7n t\u1eed s\u1ebd t\u1ef1 \u0111\u1ed9ng \u01b0u ti\u00ean cho ph\u1ea7n t\u1eed cha, \u00f4ng g\u1ea7n nh\u1ea5t c\u1ee7a ch\u00fang c\u00f3 ch\u1ee9a Position relative. Khi t\u00ecm th\u1ea5y ph\u1ea7n t\u1eed ch\u1ee9a Position relative, ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb b\u1eb1ng Position absolute s\u1ebd t\u1ef1 \u0111\u1ed9ng t\u1ea1o v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i so v\u1edbi ph\u1ea7n t\u1eed \u0111\u00f3. N\u1ebfu kh\u00f4ng, ph\u1ea7n t\u1eed \u0111\u1ecbnh v\u1ecb b\u1eb1ng Position absolute s\u1ebd l\u1ea5y v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i so v\u1edbi Viewport tr\u00ean tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"631\" height=\"340\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1476.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28637\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1476.png 631w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1476-300x162.png 300w\" sizes=\"(max-width: 631px) 100vw, 631px\" \/><\/figure><\/div>\n\n\n\n<p>Code v\u00ed d\u1ee5:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>&lt;!DOCTYPE html&gt;<\/strong><\/p><p><strong>&lt;html&gt;<\/strong><\/p><p><strong> &lt;head&gt;<\/strong><\/p><p><strong> &lt;meta charset=&#8221;utf-8&#8243;\/&gt;<\/strong><\/p><p><strong> &lt;title&gt;CSS Position&lt;\/title&gt;<\/strong><\/p><p><strong> &lt;\/head&gt;<\/strong><\/p><p><strong> &lt;body&gt;<\/strong><\/p><p><strong> &lt;h2 class=&#8221;mb-3&#8243;&gt;CSS {position:absolute}&lt;\/h2&gt;<\/strong><\/p><p><strong> &lt;div style=&#8221;position:relative; height:200px;border:1px solid red;&#8221;&gt;<\/strong><\/p><p><strong> Tui l\u00e0 d\u00f2ng div {position:relative} (\u0110\u1ecf).<\/strong><\/p><p><strong> &lt;div style=&#8221;border:1px solid green;&#8221;&gt;<\/strong><\/p><p><strong> Tui l\u00e0 d\u00f2ng div th\u00f4ng th\u01b0\u1eddng (Xanh l\u00e1).<\/strong><\/p><p><strong> &lt;div style=&#8221;position: absolute; bottom:10px; right:15px; background:yellow;&#8221;&gt;<\/strong><\/p><p><strong> position: absolute; bottom:10px; right:15px;<\/strong><\/p><p><strong> &lt;\/div&gt;<\/strong><\/p><p><strong> &lt;\/div&gt;<\/strong><\/p><p><strong> &lt;\/div&gt;<\/strong><\/p><p><strong> &lt;\/body&gt;<\/strong><\/p><p><strong>&lt;\/html&gt;<\/strong><\/p><\/blockquote>\n\n\n\n<p>K\u1ebft qu\u1ea3 b\u1ea1n c\u00f3:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1477.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28638\" width=\"558\" height=\"399\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1477.png 532w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1477-300x215.png 300w\" sizes=\"(max-width: 558px) 100vw, 558px\" \/><\/figure><\/div>\n\n\n\n<p>Khi b\u1ea1n \u0111\u1ec3 nguy\u00ean ph\u1ea7n t\u1eed m\u00e0u v\u00e0ng s\u1ebd thi\u1ebft l\u1eadp v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i so v\u1edbi ph\u1ea7n t\u1eed cha mau \u0111\u1ecf. \u0110\u1ebfn khi b\u1ea1n thu nh\u1ecf c\u1eeda s\u1ed5 l\u1ea1i v\u00e0 ch\u00e8n m\u1ed9t \u0111o\u1ea1n d\u01b0\u1edbi c\u1ee7a ph\u1ea7n t\u1eed m\u00e0u \u0111\u1ecf, l\u00fac n\u00e0y ph\u1ea7n t\u1eed m\u00e0u v\u00e0ng s\u1ebd thi\u1ebft l\u1eadp v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i c\u1ee7a n\u00f3 so v\u1edbi Viewport c\u1ee7a tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\n<h3 id=\"Position_sticky\"><a id=\"post-28626-_wjrm4zmjql8j\"><\/a><strong>Position sticky<\/strong><\/h3>\n\n\n\n<p>Ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb b\u1eb1ng Position sticky s\u1ebd thay \u0111\u1ed5i v\u1ecb tr\u00ed d\u1ef1a tr\u00ean thao t\u00e1c cu\u1ed9n c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. V\u1edbi Position sticky, ph\u1ea7n t\u1eed s\u1ebd linh \u0111\u1ed9ng chuy\u1ec3n t\u1eeb tr\u1ea1ng th\u00e1i <strong>relative <\/strong>sang <strong>fixed <\/strong>v\u00e0 ng\u01b0\u1ee3c l\u1ea1i. Position sticky kh\u00e1 th\u00fa v\u1ecb \u0111\u1ea5y b\u1ea1n nh\u1ec9!<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c h\u00e0nh v\u1edbi d\u00f2ng code c\u01a1 b\u1ea3n nh\u01b0 sau:<\/p>\n\n\n\n<p>menu s\u1ebd thay \u0111\u1ed5i theo.<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c h\u00e0nh v\u1edbi d\u00f2ng code c\u01a1 b\u1ea3n nh\u01b0 sau:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>&lt;!DOCTYPE html&gt;<\/strong><\/p><p><strong>&lt;html&gt;<\/strong><\/p><p><strong>&lt;head&gt;<\/strong><\/p><p><strong>&lt;style&gt;<\/strong><\/p><p><strong>div.sticky {<\/strong><\/p><p><strong>position: -webkit-sticky;<\/strong><\/p><p><strong>position: sticky;<\/strong><\/p><p><strong>top: 0;<\/strong><\/p><p><strong>padding: 5px;<\/strong><\/p><p><strong>background-color: #cae8ca;<\/strong><\/p><p><strong>border: 2px solid #4CAF50;<\/strong><\/p><p><strong>}<\/strong><\/p><p><strong>&lt;\/style&gt;<\/strong><\/p><p><strong>&lt;\/head&gt;<\/strong><\/p><p><strong>&lt;body&gt;<\/strong><\/p><p><strong>&lt;p&gt;Th\u1eed &lt;b&gt;cu\u1ed9n l\u00ean xu\u1ed1ng&lt;\/b&gt; \u0111\u1ec3 nh\u00ecn th\u1ea5y c\u00e1i sticky positioning n\u00e0y ho\u1ea1t \u0111\u1ed9ng nh\u00e9!&lt;\/p&gt;<\/strong><\/p><p><strong>&lt;p&gt; Internet Explorer v\u00e0 Edge phi\u00ean b\u1ea3n 15 tr\u1edf xu\u1ed1ng kh\u00f4ng h\u1ed7 tr\u1ee3 b\u1ea1n s\u1eed d\u1ee5ng Position sticky!&lt;\/p&gt;<\/strong><\/p><p><strong>&lt;div class=&#8221;sticky&#8221;&gt;Tui l\u00e0 c\u00e1i sticky!&lt;\/div&gt;<\/strong><\/p><p><strong>&lt;div style=&#8221;padding-bottom:2000px&#8221;&gt;<\/strong><\/p><p><strong>&lt;p&gt;Trong v\u00ed d\u1ee5 n\u00e0y, ph\u1ea7n t\u1eed d\u00ednh s\u1ebd d\u00ednh v\u00e0o \u0111\u1ea7u trang (top: 0), khi b\u1ea1n \u0111\u1ebfn v\u1ecb tr\u00ed cu\u1ed9n c\u1ee7a n\u00f3.&lt;\/p&gt;<\/strong><\/p><p><strong>&lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;<\/strong><\/p><p><strong>&lt;p&gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.&lt;\/p&gt;<\/strong><\/p><p><strong>&lt;\/div&gt;<\/strong><\/p><p><strong>&lt;\/body&gt;<\/strong><\/p><p><strong>&lt;\/html&gt;<\/strong><\/p><\/blockquote>\n\n\n\n<p>B\u1ea1n s\u1ebd c\u00f3 k\u1ebft qu\u1ea3 nh\u01b0 sau:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1478.png\" alt=\"position-trong-css-la-gi\" class=\"wp-image-28639\" width=\"791\" height=\"329\" title=\"\" srcset=\"https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1478.png 1581w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1478-300x125.png 300w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1478-1024x426.png 1024w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1478-768x319.png 768w, https:\/\/tino.vn\/blog\/wp-content\/uploads\/2021\/07\/word-image-1478-1536x638.png 1536w\" sizes=\"(max-width: 791px) 100vw, 791px\" \/><\/figure><\/div>\n\n\n\n<p>Thanh m\u00e0u xanh c\u00f3 d\u00f2ng ch\u1eef <strong>Tui l\u00e0 c\u00e1i sticky! <\/strong>s\u1ebd thay \u0111\u1ed5i v\u1ecb tr\u00ed khi b\u1ea1n cu\u1ed9n con l\u0103n c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i ch\u1eef v\u00e0 th\u1ef1c h\u00e0nh <a href=\"https:\/\/www.w3schools.com\/cssref\/tryit.asp?filename=trycss_position_sticky\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">t\u1ea1i \u0111\u00e2y<\/a>.<\/p>\n\n\n\n<p>Qua b\u00e0i vi\u1ebft, Tino Group \u0111\u00e3 gi\u1ea3i \u0111\u00e1p th\u1eafc m\u1eafc v\u1ec1 Position trong CSS l\u00e0 g\u00ec, c\u0169ng nh\u01b0 \u0111\u01b0a ra t\u1eebng v\u00ed d\u1ee5 cho t\u1eebng thu\u1ed9c t\u00ednh tr\u1ef1c quan nh\u1ea5t \u0111\u1ec3 gi\u00fap b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Position trong CSS m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3 nh\u1ea5t. Tino Group ch\u00fac b\u1ea1n tr\u1edf th\u00e0nh m\u1ed9t b\u1eadc th\u1ea7y s\u00e1ng t\u1ea1o v\u00e0 thi\u1ebft k\u1ebf web b\u1eb1ng CSS nh\u00e9!<\/p>\n\n\n\n<p>B\u00e0i vi\u1ebft tham kh\u1ea3o t\u1eeb c\u00e1c ngu\u1ed3n: <a href=\"https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3Schools <\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/padding\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Mozilla<\/a>, <a href=\"https:\/\/kipalog.com\/posts\/Tim-hieu-thuoc-tinh-position-trong-CSS\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Kipalog <\/a>v\u00e0 <a href=\"https:\/\/openplanning.net\/12521\/css-position\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Open Planning<\/a>.<\/p>\n\n\n\n<h2 id=\"Nh\u1eefng_c\u00e2u_h\u1ecfi_th\u01b0\u1eddng_g\u1eb7p_v\u1ec1_Position_trong_CSS\"><a id=\"post-28626-_tptxz0raq88t\"><\/a><strong>Nh\u1eefng c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Position trong CSS<\/strong><\/h2>\n\n\n\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"N\u00ean_h\u1ecdc_v\u1ec1_Position_trong_CSS_v\u00e0_h\u1ecdc_CSS_\u1edf_\u0111\u00e2u?\">N\u00ean h\u1ecdc v\u1ec1 Position trong CSS v\u00e0 h\u1ecdc CSS \u1edf \u0111\u00e2u?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>Tino Group g\u1ee3i \u00fd cho b\u1ea1n 2 trang sau \u0111\u1ec3 h\u1ecdc c\u00e1ch code tr\u1ef1c quan, hi\u1ec7u qu\u1ea3 c\u00f9ng nhi\u1ec1u ng\u00f4n ng\u1eef li\u00ean quan m\u1ed9t c\u00e1ch ho\u00e0n to\u00e0n mi\u1ec5n ph\u00ed l\u00e0: <a href=\"https:\/\/www.w3schools.com\/cssref\/pr_class_position.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3Schools <\/a>v\u00e0 <a href=\"https:\/\/openplanning.net\/12521\/css-position\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Open Planning<\/a>.<\/p>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi W3Schools b\u1ea1n s\u1ebd c\u1ea7n ph\u1ea3i bi\u1ebft m\u1ed9t ch\u00fat ti\u1ebfng Anh \u0111\u1ec3 c\u00f3 th\u1ec3 h\u1ecdc t\u1ed1t nh\u1ea5t. N\u1ebfu b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng ng\u00f4n ng\u1eef ti\u1ebfng Vi\u1ec7t, b\u1ea1n c\u00f3 th\u1ec3 h\u1ecdc ngay t\u1ea1i Open Planning nh\u00e9!<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"V\u00ec_sao_Menu_Sticky_l\u1ea1i_kh\u00f4ng_ho\u1ea1t_\u0111\u1ed9ng?\">V\u00ec sao Menu Sticky l\u1ea1i kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>N\u1ebfu b\u1ea1n ch\u1eafc ch\u1eafn \u0111\u00e3 code ch\u00ednh x\u00e1c, kh\u1ea3 n\u0103ng cao l\u00e0 do tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u00f4ng h\u1ed7 tr\u1ee3 Menu Sticky, 2 tr\u00ecnh duy\u1ec7t c\u1ee7a Microsoft l\u00e0 Internet Explorer v\u00e0 Edge phi\u00ean b\u1ea3n 15 tr\u1edf xu\u1ed1ng kh\u00f4ng h\u1ed7 tr\u1ee3 b\u1ea1n s\u1eed d\u1ee5ng Position sticky.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"Layout_l\u00e0_g\u00ec?\">Layout l\u00e0 g\u00ec?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>Layout c\u00f3 th\u1ec3 hi\u1ec3u \u0111\u01a1n gi\u1ea3n \u0111\u00f3 ch\u00ednh l\u00e0 s\u1eafp x\u1ebfp v\u1ecb tr\u00ed c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed tr\u00ean trang web c\u1ee7a b\u1ea1n sao cho th\u1eadt \u0111\u1eb9p m\u1eaft. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 Layout t\u1ea1i \u0111\u00e2y.<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section\t\thelp class=\"sc_fs_faq sc_card    \"\n\t\t\t\t>\n\t\t\t\t<h2 id=\"L\u00e0m_sao_\u0111\u1ec3_c\u0103n_gi\u1eefa_1_d\u00f2ng_text_tr\u00ean_b\u1ee9c_\u1ea3nh?\">L\u00e0m sao \u0111\u1ec3 c\u0103n gi\u1eefa 1 d\u00f2ng text tr\u00ean b\u1ee9c \u1ea3nh?<\/h2>\t\t\t\t<div>\n\t\t\t\t\t\t<div class=\"sc_fs_faq__content\">\n\t\t\t\t\n\n<p>\u0110\u1ec3 c\u0103n gi\u1eefa text trong b\u1ee9c \u1ea3nh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u1ebb thu\u1ed9c t\u00ednh <strong>center. <\/strong>B\u1ea1n c\u00f3 th\u1ec3 copy code v\u00e0 l\u01b0u l\u1ea1i v\u1edbi \u0111\u1ecbnh d\u1ea1ng html v\u00e0 ch\u1ea1y b\u1eb1ng tr\u00ecnh duy\u1ec7t:<\/p>\n\n\n\n<p>&lt;!DOCTYPE html&gt;<\/p>\n\n\n\n<p>&lt;html&gt;<\/p>\n\n\n\n<p>&lt;head&gt;<\/p>\n\n\n\n<p>&lt;style&gt;<\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>position: relative;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.center {<\/p>\n\n\n\n<p>position: absolute;<\/p>\n\n\n\n<p>top: 50%;<\/p>\n\n\n\n<p>width: 100%;<\/p>\n\n\n\n<p>text-align: center;<\/p>\n\n\n\n<p>font-size: 18px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>img {<\/p>\n\n\n\n<p>width: 100%;<\/p>\n\n\n\n<p>height: auto;<\/p>\n\n\n\n<p>opacity: 0.3;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>&lt;\/style&gt;<\/p>\n\n\n\n<p>&lt;\/head&gt;<\/p>\n\n\n\n<p>&lt;body&gt;<\/p>\n\n\n\n<p>&lt;h2&gt;Image Text&lt;\/h2&gt;<\/p>\n\n\n\n<p>&lt;p&gt;D\u00f2ng text ch\u00ednh gi\u1eefa \u1ea3nh:&lt;\/p&gt;<\/p>\n\n\n\n<p>&lt;div class=&#8221;container&#8221;&gt;<\/p>\n\n\n\n<p>&lt;img src=&#8221;img_5terre_wide.jpg&#8221; alt=&#8221;Cinque Terre&#8221; width=&#8221;1000&#8243; height=&#8221;300&#8243;&gt;<\/p>\n\n\n\n<p>&lt;div class=&#8221;center&#8221;&gt;Centered&lt;\/div&gt;<\/p>\n\n\n\n<p>&lt;\/div&gt;<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html&gt;<\/p>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/section>\n\t\t\n<script type=\"application\/ld+json\">\n\t{\n\t\t\"@context\": \"https:\/\/schema.org\",\n\t\t\"@type\": \"FAQPage\",\n\t\t\"mainEntity\": [\n\t\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"N\u00ean h\u1ecdc v\u1ec1 Position trong CSS v\u00e0 h\u1ecdc CSS \u1edf \u0111\u00e2u?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Tino Group g\u1ee3i \u00fd cho b\u1ea1n 2 trang sau \u0111\u1ec3 h\u1ecdc c\u00e1ch code tr\u1ef1c quan, hi\u1ec7u qu\u1ea3 c\u00f9ng nhi\u1ec1u ng\u00f4n ng\u1eef li\u00ean quan m\u1ed9t c\u00e1ch ho\u00e0n to\u00e0n mi\u1ec5n ph\u00ed l\u00e0: <a>W3Schools <\/a>v\u00e0 <a>Open Planning<\/a>.<\/p><p>\u0110\u1ed1i v\u1edbi W3Schools b\u1ea1n s\u1ebd c\u1ea7n ph\u1ea3i bi\u1ebft m\u1ed9t ch\u00fat ti\u1ebfng Anh \u0111\u1ec3 c\u00f3 th\u1ec3 h\u1ecdc t\u1ed1t nh\u1ea5t. N\u1ebfu b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng ng\u00f4n ng\u1eef ti\u1ebfng Vi\u1ec7t, b\u1ea1n c\u00f3 th\u1ec3 h\u1ecdc ngay t\u1ea1i Open Planning nh\u00e9!<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"V\u00ec sao Menu Sticky l\u1ea1i kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>N\u1ebfu b\u1ea1n ch\u1eafc ch\u1eafn \u0111\u00e3 code ch\u00ednh x\u00e1c, kh\u1ea3 n\u0103ng cao l\u00e0 do tr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u00f4ng h\u1ed7 tr\u1ee3 Menu Sticky, 2 tr\u00ecnh duy\u1ec7t c\u1ee7a Microsoft l\u00e0 Internet Explorer v\u00e0 Edge phi\u00ean b\u1ea3n 15 tr\u1edf xu\u1ed1ng kh\u00f4ng h\u1ed7 tr\u1ee3 b\u1ea1n s\u1eed d\u1ee5ng Position sticky.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"Layout l\u00e0 g\u00ec?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>Layout c\u00f3 th\u1ec3 hi\u1ec3u \u0111\u01a1n gi\u1ea3n \u0111\u00f3 ch\u00ednh l\u00e0 s\u1eafp x\u1ebfp v\u1ecb tr\u00ed c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed tr\u00ean trang web c\u1ee7a b\u1ea1n sao cho th\u1eadt \u0111\u1eb9p m\u1eaft. B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam v\u1ec1 Layout t\u1ea1i \u0111\u00e2y.<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t,\t\t\t\t{\n\t\t\t\t\"@type\": \"Question\",\n\t\t\t\t\"name\": \"L\u00e0m sao \u0111\u1ec3 c\u0103n gi\u1eefa 1 d\u00f2ng text tr\u00ean b\u1ee9c \u1ea3nh?\",\n\t\t\t\t\"acceptedAnswer\": {\n\t\t\t\t\t\"@type\": \"Answer\",\n\t\t\t\t\t\"text\": \"<p>\u0110\u1ec3 c\u0103n gi\u1eefa text trong b\u1ee9c \u1ea3nh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u1ebb thu\u1ed9c t\u00ednh <strong>center. <\/strong>B\u1ea1n c\u00f3 th\u1ec3 copy code v\u00e0 l\u01b0u l\u1ea1i v\u1edbi \u0111\u1ecbnh d\u1ea1ng html v\u00e0 ch\u1ea1y b\u1eb1ng tr\u00ecnh duy\u1ec7t:<\/p><p>&lt;!DOCTYPE html&gt;<\/p><p>&lt;html&gt;<\/p><p>&lt;head&gt;<\/p><p>&lt;style&gt;<\/p><p>.container {<\/p><p>position: relative;<\/p><p>}<\/p><p>.center {<\/p><p>position: absolute;<\/p><p>top: 50%;<\/p><p>width: 100%;<\/p><p>text-align: center;<\/p><p>font-size: 18px;<\/p><p>}<\/p><p>img {<\/p><p>width: 100%;<\/p><p>height: auto;<\/p><p>opacity: 0.3;<\/p><p>}<\/p><p>&lt;\/style&gt;<\/p><p>&lt;\/head&gt;<\/p><p>&lt;body&gt;<\/p><p>&lt;h2&gt;Image Text&lt;\/h2&gt;<\/p><p>&lt;p&gt;D\u00f2ng text ch\u00ednh gi\u1eefa \u1ea3nh:&lt;\/p&gt;<\/p><p>&lt;div class=\\\"container\\\"&gt;<\/p><p>&lt;img src=\\\"img_5terre_wide.jpg\\\" alt=\\\"Cinque Terre\\\" width=\\\"1000\\\" height=\\\"300\\\"&gt;<\/p><p>&lt;div class=\\\"center\\\"&gt;Centered&lt;\/div&gt;<\/p><p>&lt;\/div&gt;<\/p><p>&lt;\/body&gt;<\/p><p>&lt;\/html&gt;<\/p>\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t}\n\t\t\t\t\t\t]\n\t}\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"<p>N\u1ebfu b\u1ea1n \u0111ang h\u1ecdc c\u00e1ch s\u1eed d\u1ee5ng CSS cho trang web c\u1ee7a m\u00ecnh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Position trong CSS \u0111\u1ec3 thi\u1ebft k\u1ebf layout c\u1ee7a b\u1ea1n tr\u00f4ng th\u1eadt \u0111\u1eb9p m\u1eaft. V\u1eady, Position trong CSS l\u00e0 g\u00ec? Tino Group s\u1ebd gi\u1ea3i \u0111\u00e1p gi\u00fap b\u1ea1n c\u0169ng v\u1edbi nh\u1eefng v\u00ed d\u1ee5 tr\u1ef1c quan b\u1eb1ng code v\u00e0 h\u00ecnh [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":28627,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5404],"tags":[6187],"class_list":["post-28626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmasters","tag-ho-tro-developer"],"_links":{"self":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/28626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/comments?post=28626"}],"version-history":[{"count":0,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/posts\/28626\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media\/28627"}],"wp:attachment":[{"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/media?parent=28626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/categories?post=28626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tino.vn\/blog\/wp-json\/wp\/v2\/tags?post=28626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}