{"id":107,"date":"2022-01-12T23:28:58","date_gmt":"2022-01-12T23:28:58","guid":{"rendered":"https:\/\/melfaeforest.xhere.eu.org\/?p=107"},"modified":"2022-02-02T21:41:17","modified_gmt":"2022-02-02T21:41:17","slug":"html-css-course-day-6-relative-absolute-positioning","status":"publish","type":"post","link":"https:\/\/melfaeforest.xhere.eu.org\/?p=107","title":{"rendered":"HTML\/CSS Course \u2013 Day 6 \u2013 Relative &#038; Absolute Positioning"},"content":{"rendered":"\n<p>In CSS, there are a couple positioning modes, but the more important ones to talk about currently are Normal Flow and Absolute Positioning.<\/p>\n\n\n\n<p>Relative Positioning is the default positioning of HTML; the elements are simply laid out according to their order in the HTML code, and are relative to their parent elements. In simpler terms, elements where are in relative positioning are referred to as being \u201cin flow\u201d.<\/p>\n\n\n\n<p>Absolute Positioning on the other hand takes out the element from the normal flow, and thus are termed as \u201cout of flow\u201d elements. They also have no impact on surrounding elements, and might actually overlap some of them. To move elements who are in absolute position, you can use the \u201ctop\u201d, \u201cbottom\u201d, \u201cleft\u201d, and \u201cright\u201d properties to offset the element. Doing so will have it move from its relatively positioned container.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In CSS, there are a couple positioning modes, but the more important ones to talk about currently are Normal Flow and Absolute Positioning. Relative Positioning is the default positioning of HTML; the elements are simply laid out according to their order in the HTML code, and are relative to their parent elements. In simpler terms, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6],"class_list":["post-107","post","type-post","status-publish","format-standard","hentry","category-html-css-course","tag-html-css-course"],"_links":{"self":[{"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=107"}],"version-history":[{"count":2,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":279,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=\/wp\/v2\/posts\/107\/revisions\/279"}],"wp:attachment":[{"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/melfaeforest.xhere.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}