{"id":28,"date":"2016-04-06T02:22:27","date_gmt":"2016-04-06T02:22:27","guid":{"rendered":"https:\/\/dangnhsite.wordpress.com\/?p=28"},"modified":"2026-08-18T15:35:00","modified_gmt":"2026-08-18T07:35:00","slug":"short-accurate-definition-about-position-in-css","status":"publish","type":"post","link":"https:\/\/dangnh.cf\/vi\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/","title":{"rendered":"Short &#038; accurate definition about position in CSS"},"content":{"rendered":"<h3>Skip this part, just me jibber jabber<\/h3>\n<p><span style=\"color: #000000;\">Ever since I started developing web, I&#8217;ve seen and used the CSS attribute so-called &#8220;<em>position<\/em>&#8220;. But I&#8217;d never seem to understood what &#8220;<em>position<\/em>&#8221; in CSS\u00a0does, I just randomize its value until I got what I needed (yeah that&#8217;s stupid and ignorance). But then, one day, I realize something big, something important is missing&#8230;\u00a0I feel so empty inside&#8230; DAMN I HAVE TO WRAP MY HEAD AROUND THIS &#8220;POSITION&#8221; THING! So here it hoes *goes (sorry, typo), real short and accurate. Hope this post will help some fallen angels like I used to be.<\/span><\/p>\n<h3>Nerd part<\/h3>\n<p><span style=\"color: #000000;\">HTML element is<strong>\u00a0literally a rectangle of pixels<\/strong>, <strong>flows into your screen<\/strong> the in its most natural way. Your job is to <strong>position<\/strong> it to achieve a desired design.<\/span><\/p>\n<ul>\n<li><span style=\"color: #000000;\">CSS &#8220;<em>position<\/em>&#8221; attribute&#8217;s values:<\/span>\n<ul>\n<li><span style=\"color: #000000;\"><em>static:\u00a0<\/em>Default values for all HTML element. Don&#8217;t need to concern about it.<\/span><\/li>\n<li><span style=\"color: #000000;\"><em>fixed:\u00a0<\/em><\/span>\n<ul>\n<li><span style=\"color: #000000;\">Element will stay in a\u00a0<strong>fixed position\u00a0<\/strong>to the\u00a0<strong>viewport<\/strong> (I mean the browser&#8217;s window). <\/span><\/li>\n<li><span style=\"color: #000000;\">Element will<strong> not move anywhere<\/strong> even when you scroll or have some other elements collide with it.<\/span><\/li>\n<li><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><em><strong>*Note:<\/strong><\/em> <\/span>Use with caution, it may cause losing content on small viewport, like phones, tablet or small monitor.<\/span><\/li>\n<\/ul>\n<\/li>\n<li><span style=\"color: #000000;\"><em>absolute:<\/em><\/span>\n<ul>\n<li><span style=\"color: #000000;\">Simply place the element absolutely right where you desired with attribute like &#8220;<em>top<\/em>&#8220;, &#8220;<em>bottom<\/em>&#8220;, &#8220;<em>right<\/em>&#8220;, &#8220;<em>left<\/em>&#8220;.\u00a0<\/span><\/li>\n<li><span style=\"color: #000000;\">This element&#8217;s position will be relative to:<\/span>\n<ul>\n<li><span style=\"color: #000000;\">It&#8217;s parent element if the<strong> parent&#8217;s &#8220;<em>position<\/em>&#8221; is <em>absolute<\/em> or <em>relative<\/em><\/strong><\/span><\/li>\n<li><span style=\"color: #000000;\">If there is no such parent, it will <strong>default<\/strong> all the way back up to the <strong>element<\/strong><\/span><\/li>\n<\/ul>\n<\/li>\n<li><span style=\"color: #000000;\"><span style=\"color: #ff0000;\">*<\/span><em><strong><span style=\"color: #ff0000;\">Note:<\/span>\u00a0<\/strong><\/em>Absolute positioning will cause the element to be <strong>removed<\/strong> from the flow of elements on the page. Meaning that other static element can be <strong>collide<\/strong> with it. and\u00a0it&#8217;s overuse or improper use can <strong>limit the flexibility<\/strong> of your site.<\/span><\/li>\n<\/ul>\n<\/li>\n<li><span style=\"color: #000000;\"><em>relative:<\/em><\/span>\n<ul>\n<li><span style=\"color: #000000;\">This value caused me the most painful headache ever. Contrary\u00a0to what people (me) usually think, &#8220;<em>relative&#8221;\u00a0<\/em>here actually means\u00a0<strong>&#8220;relative to it self&#8221;\u00a0<\/strong>(what the heck is that???)<\/span><\/li>\n<li><span style=\"color: #000000;\"><strong>&#8220;relative to it self&#8221;\u00a0<\/strong>means that if you set\u00a0<em>&#8220;top&#8221;, &#8220;bottom&#8221;, &#8220;right&#8221;, &#8220;left&#8221;\u00a0<\/em>to this element, it will be\u00a0<strong>shifted from the place where it would normally be.<\/strong> Which is great! \ud83d\ude42<\/span><\/li>\n<li><em><strong><span style=\"color: #ff0000;\">*Note:\u00a0<\/span><\/strong><\/em>\n<ul>\n<li><span style=\"color: #000000;\">Relative positioning element will be always stay\u00a0<strong>on top\u00a0<\/strong>of other <em>static <\/em>positioning element. No matter what z-index you provide.<\/span><\/li>\n<li><span style=\"color: #000000;\">And as I mentioned, any child element of a\u00a0<em>relative\u00a0<\/em>element can be position <em>absolute\u00a0<\/em>to its\u00a0<em>relative <\/em>parent<em>\u00a0<\/em>element. Which is great too! \ud83d\ude42<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<blockquote><p>That&#8217;s all! \ud83d\ude42<\/p><\/blockquote>\n<p><span style=\"color: #000000;\">There are many things which I did not mention in this article for the sake of Simplicity, but please, point me out if I&#8217;m wrong or misunderstand something.<\/span><\/p>\n<p><span style=\"color: #000000;\">Thank you for reading this. Give me a comment \ud83d\ude09<\/span><\/p>\n<p>Have a lovely day \ud83d\ude09<\/p>","protected":false},"excerpt":{"rendered":"<p>static, relative, absolute, fixed \u2014 a short and accurate definition of every CSS position value, and how each one actually behaves.<\/p>","protected":false},"author":1,"featured_media":37,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[4],"tags":[6,7,8,9,10],"class_list":["post-28","post","type-post","status-publish","format-aside","has-post-thumbnail","hentry","category-html-css","tag-accurate","tag-css","tag-hoho","tag-html","tag-short","post_format-post-format-aside"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS position Explained: static, relative, absolute, fixed<\/title>\n<meta name=\"description\" content=\"A short, accurate explanation of the CSS position property \u2014 what static, fixed, absolute and relative actually do, plus the gotchas that come with each.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dangnh.cf\/vi\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS position Explained: static, relative, absolute, fixed\" \/>\n<meta property=\"og:description\" content=\"A short, accurate explanation of the CSS position property \u2014 what static, fixed, absolute and relative actually do, plus the gotchas that come with each.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dangnh.cf\/vi\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Nguyen\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-06T02:22:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-18T07:35:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/css-style.png?fit=812%2C417&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"812\" \/>\n\t<meta property=\"og:image:height\" content=\"417\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/dangnh.cf\\\/vi\\\/#\\\/schema\\\/person\\\/8f3b9db3b250186af217fbeec88eda9c\"},\"headline\":\"Short &#038; accurate definition about position in CSS\",\"datePublished\":\"2016-04-06T02:22:27+00:00\",\"dateModified\":\"2026-08-18T07:35:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/\"},\"wordCount\":461,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/vi\\\/#\\\/schema\\\/person\\\/8f3b9db3b250186af217fbeec88eda9c\"},\"image\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/dangnh.cf\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/css-style.png?fit=812%2C417&ssl=1\",\"keywords\":[\"accurate\",\"css\",\"hoho\",\"html\",\"short\"],\"articleSection\":[\"HTML, CSS\"],\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/\",\"url\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/\",\"name\":\"CSS position Explained: static, relative, absolute, fixed\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/vi\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/dangnh.cf\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/css-style.png?fit=812%2C417&ssl=1\",\"datePublished\":\"2016-04-06T02:22:27+00:00\",\"dateModified\":\"2026-08-18T07:35:00+00:00\",\"description\":\"A short, accurate explanation of the CSS position property \u2014 what static, fixed, absolute and relative actually do, plus the gotchas that come with each.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/dangnh.cf\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/css-style.png?fit=812%2C417&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/dangnh.cf\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/css-style.png?fit=812%2C417&ssl=1\",\"width\":812,\"height\":417,\"caption\":\"position css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dangnh.cf\\\/2016\\\/04\\\/06\\\/short-accurate-definition-about-position-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/dangnh.cf\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Short &#038; accurate definition about position in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/dangnh.cf\\\/vi\\\/#website\",\"url\":\"https:\\\/\\\/dangnh.cf\\\/vi\\\/\",\"name\":\"Mark Nguyen\",\"description\":\"I build the e-commerce backends customers never see \u2014 payments, integrations, and AI features that actually ship.\",\"publisher\":{\"@id\":\"https:\\\/\\\/dangnh.cf\\\/vi\\\/#\\\/schema\\\/person\\\/8f3b9db3b250186af217fbeec88eda9c\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/dangnh.cf\\\/vi\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/dangnh.cf\\\/vi\\\/#\\\/schema\\\/person\\\/8f3b9db3b250186af217fbeec88eda9c\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d838feab6bbd5e774c608b656a29ab0d54981b88fa4b563a83d7635108b6c76e?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d838feab6bbd5e774c608b656a29ab0d54981b88fa4b563a83d7635108b6c76e?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d838feab6bbd5e774c608b656a29ab0d54981b88fa4b563a83d7635108b6c76e?s=96&d=retro&r=g\",\"caption\":\"admin\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d838feab6bbd5e774c608b656a29ab0d54981b88fa4b563a83d7635108b6c76e?s=96&d=retro&r=g\"},\"description\":\"Dang Nguyen Hai (Mark) is a senior fullstack engineer in Ho Chi Minh City with 13+ years building e-commerce backends, payment systems and the AI features that sit on top of them. He works with Shopware and Laravel, and writes here about PHP internals, e-commerce architecture and getting AI features to behave in production.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/mark-nguyen-4027458b\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS position Explained: static, relative, absolute, fixed","description":"A short, accurate explanation of the CSS position property \u2014 what static, fixed, absolute and relative actually do, plus the gotchas that come with each.","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:\/\/dangnh.cf\/vi\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/","og_locale":"vi_VN","og_type":"article","og_title":"CSS position Explained: static, relative, absolute, fixed","og_description":"A short, accurate explanation of the CSS position property \u2014 what static, fixed, absolute and relative actually do, plus the gotchas that come with each.","og_url":"https:\/\/dangnh.cf\/vi\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/","og_site_name":"Mark Nguyen","article_published_time":"2016-04-06T02:22:27+00:00","article_modified_time":"2026-08-18T07:35:00+00:00","og_image":[{"width":812,"height":417,"url":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/css-style.png?fit=812%2C417&ssl=1","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"admin","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/#article","isPartOf":{"@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/"},"author":{"name":"admin","@id":"https:\/\/dangnh.cf\/vi\/#\/schema\/person\/8f3b9db3b250186af217fbeec88eda9c"},"headline":"Short &#038; accurate definition about position in CSS","datePublished":"2016-04-06T02:22:27+00:00","dateModified":"2026-08-18T07:35:00+00:00","mainEntityOfPage":{"@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/"},"wordCount":461,"commentCount":0,"publisher":{"@id":"https:\/\/dangnh.cf\/vi\/#\/schema\/person\/8f3b9db3b250186af217fbeec88eda9c"},"image":{"@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/css-style.png?fit=812%2C417&ssl=1","keywords":["accurate","css","hoho","html","short"],"articleSection":["HTML, CSS"],"inLanguage":"vi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/","url":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/","name":"CSS position Explained: static, relative, absolute, fixed","isPartOf":{"@id":"https:\/\/dangnh.cf\/vi\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/#primaryimage"},"image":{"@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/css-style.png?fit=812%2C417&ssl=1","datePublished":"2016-04-06T02:22:27+00:00","dateModified":"2026-08-18T07:35:00+00:00","description":"A short, accurate explanation of the CSS position property \u2014 what static, fixed, absolute and relative actually do, plus the gotchas that come with each.","breadcrumb":{"@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/#primaryimage","url":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/css-style.png?fit=812%2C417&ssl=1","contentUrl":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/css-style.png?fit=812%2C417&ssl=1","width":812,"height":417,"caption":"position css"},{"@type":"BreadcrumbList","@id":"https:\/\/dangnh.cf\/2016\/04\/06\/short-accurate-definition-about-position-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dangnh.cf\/"},{"@type":"ListItem","position":2,"name":"Short &#038; accurate definition about position in CSS"}]},{"@type":"WebSite","@id":"https:\/\/dangnh.cf\/vi\/#website","url":"https:\/\/dangnh.cf\/vi\/","name":"Mark Nguyen","description":"I build the e-commerce backends customers never see \u2014 payments, integrations, and AI features that actually ship.","publisher":{"@id":"https:\/\/dangnh.cf\/vi\/#\/schema\/person\/8f3b9db3b250186af217fbeec88eda9c"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dangnh.cf\/vi\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":["Person","Organization"],"@id":"https:\/\/dangnh.cf\/vi\/#\/schema\/person\/8f3b9db3b250186af217fbeec88eda9c","name":"admin","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/secure.gravatar.com\/avatar\/d838feab6bbd5e774c608b656a29ab0d54981b88fa4b563a83d7635108b6c76e?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d838feab6bbd5e774c608b656a29ab0d54981b88fa4b563a83d7635108b6c76e?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d838feab6bbd5e774c608b656a29ab0d54981b88fa4b563a83d7635108b6c76e?s=96&d=retro&r=g","caption":"admin"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/d838feab6bbd5e774c608b656a29ab0d54981b88fa4b563a83d7635108b6c76e?s=96&d=retro&r=g"},"description":"Dang Nguyen Hai (Mark) is a senior fullstack engineer in Ho Chi Minh City with 13+ years building e-commerce backends, payment systems and the AI features that sit on top of them. He works with Shopware and Laravel, and writes here about PHP internals, e-commerce architecture and getting AI features to behave in production.","sameAs":["https:\/\/www.linkedin.com\/in\/mark-nguyen-4027458b"]}]}},"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9w3NP-s","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":69,"url":"https:\/\/dangnh.cf\/vi\/2017\/03\/30\/when-to-make-a-move\/","url_meta":{"origin":28,"position":0},"title":"When to make a move?","author":"admin","date":"Th\u00e1ng 3 30, 2017","format":"aside","excerpt":"On knowing when to stay and when to leave \u2014 a few honest thoughts on timing a career move.","rel":"","context":"B\u00e0i t\u01b0\u01a1ng t\u1ef1","block_context":{"text":"B\u00e0i t\u01b0\u01a1ng t\u1ef1","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/desktop5.jpg?fit=1200%2C805&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/desktop5.jpg?fit=1200%2C805&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/desktop5.jpg?fit=1200%2C805&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/desktop5.jpg?fit=1200%2C805&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/desktop5.jpg?fit=1200%2C805&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":112,"url":"https:\/\/dangnh.cf\/vi\/2017\/05\/25\/what-is-stdclass-and-dynamic-properties-in-php\/","url_meta":{"origin":28,"position":1},"title":"What is stdClass? And Dynamic Properties in PHP?","author":"admin","date":"Th\u00e1ng 5 25, 2017","format":false,"excerpt":"stdClass shows up all over the core of Laravel and Yii. Here is what it actually is, how dynamic properties work in PHP, and when a property bag beats an array.","rel":"","context":"Trong &quot;PHP&quot;","block_context":{"text":"PHP","link":"https:\/\/dangnh.cf\/vi\/category\/web-development\/php\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2017\/05\/stdclass-trong-php.png?fit=365%2C268&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":66,"url":"https:\/\/dangnh.cf\/vi\/2017\/05\/19\/lam-toan-giai-tri-mot-ti-nhi\/","url_meta":{"origin":28,"position":2},"title":"L\u00e0m to\u00e1n gi\u1ea3i tr\u00ed m\u1ed9t t\u00ed nh\u1ec9?","author":"admin","date":"Th\u00e1ng 5 19, 2017","format":false,"excerpt":"M\u1ed9t b\u00e0i test l\u1eadp tr\u00ecnh 30 ph\u00fat: t\u00ecm ch\u1ec9 s\u1ed1 c\u00e2n b\u1eb1ng c\u1ee7a m\u1ea3ng v\u1edbi \u0111\u1ed9 ph\u1ee9c t\u1ea1p O(N). \u0110\u1ec1 b\u00e0i, h\u01b0\u1edbng gi\u1ea3i v\u00e0 code PHP ho\u00e0n ch\u1ec9nh.","rel":"","context":"Trong &quot;PHP&quot;","block_context":{"text":"PHP","link":"https:\/\/dangnh.cf\/vi\/category\/web-development\/php\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2017\/05\/learning_math-e1459355151809.jpg?fit=800%2C513&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2017\/05\/learning_math-e1459355151809.jpg?fit=800%2C513&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2017\/05\/learning_math-e1459355151809.jpg?fit=800%2C513&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2017\/05\/learning_math-e1459355151809.jpg?fit=800%2C513&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":43,"url":"https:\/\/dangnh.cf\/vi\/2016\/04\/06\/variable-debug-in-yii-2\/","url_meta":{"origin":28,"position":3},"title":"Debug variables in Yii 2","author":"admin","date":"Th\u00e1ng 4 6, 2016","format":false,"excerpt":"Quick ways to dump and inspect variables while debugging in Yii 2.","rel":"","context":"Trong &quot;PHP&quot;","block_context":{"text":"PHP","link":"https:\/\/dangnh.cf\/vi\/category\/web-development\/php\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/debug-excel.jpg?fit=640%2C388&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/debug-excel.jpg?fit=640%2C388&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/debug-excel.jpg?fit=640%2C388&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":211,"url":"https:\/\/dangnh.cf\/vi\/2018\/06\/01\/trait-mixin-in-php\/","url_meta":{"origin":28,"position":4},"title":"Trait &#8211; Mixin in PHP?","author":"admin","date":"Th\u00e1ng 6 1, 2018","format":false,"excerpt":"PHP l\u00e0 ng\u00f4n ng\u1eef \u0111\u01a1n k\u1ebf th\u1eeba, v\u00e0 c\u00e2y k\u1ebf th\u1eeba d\u00e0i lu\u00f4n l\u00e0 c\u01a1n \u00e1c m\u1ed9ng. Trait sinh ra \u0111\u1ec3 gi\u1ea3i quy\u1ebft chuy\u1ec7n \u0111\u00f3 \u2014 nh\u01b0ng khi n\u00e0o n\u00ean d\u00f9ng, v\u00e0 khi n\u00e0o n\u00ean tr\u00e1nh?","rel":"","context":"Trong &quot;PHP&quot;","block_context":{"text":"PHP","link":"https:\/\/dangnh.cf\/vi\/category\/web-development\/php\/"},"img":{"alt_text":"Trait in PHP","src":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/06\/retro-background-3101430_960_720.jpg?fit=960%2C540&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/06\/retro-background-3101430_960_720.jpg?fit=960%2C540&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/06\/retro-background-3101430_960_720.jpg?fit=960%2C540&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/06\/retro-background-3101430_960_720.jpg?fit=960%2C540&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":283,"url":"https:\/\/dangnh.cf\/vi\/2018\/01\/12\/setup-nginx-php-mysql-phpmyadmin-macos-high-sierra\/","url_meta":{"origin":28,"position":5},"title":"Setup Nginx, PHP, MySQL and phpMyAdmin on macOS High Sierra","author":"admin","date":"Th\u00e1ng 1 12, 2018","format":false,"excerpt":"Two days buried in bash commands to get Nginx, PHP 5.6, MySQL and phpMyAdmin running on macOS High Sierra \u2014 and the one tutorial that finally worked.","rel":"","context":"Trong &quot;Environment&quot;","block_context":{"text":"Environment","link":"https:\/\/dangnh.cf\/vi\/category\/web-development\/environment\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/01\/mac-for-hackers-set-up-homebrew-install-update-open-source-tools.1280x600.jpg?fit=1200%2C563&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/01\/mac-for-hackers-set-up-homebrew-install-update-open-source-tools.1280x600.jpg?fit=1200%2C563&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/01\/mac-for-hackers-set-up-homebrew-install-update-open-source-tools.1280x600.jpg?fit=1200%2C563&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/01\/mac-for-hackers-set-up-homebrew-install-update-open-source-tools.1280x600.jpg?fit=1200%2C563&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2018\/01\/mac-for-hackers-set-up-homebrew-install-update-open-source-tools.1280x600.jpg?fit=1200%2C563&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/dangnh.cf\/wp-content\/uploads\/2016\/04\/css-style.png?fit=812%2C417&ssl=1","_links":{"self":[{"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/posts\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":4,"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":518,"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/posts\/28\/revisions\/518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/media\/37"}],"wp:attachment":[{"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dangnh.cf\/vi\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}