{"id":2851,"date":"2021-10-18T08:29:39","date_gmt":"2021-10-18T08:29:39","guid":{"rendered":"https:\/\/elementor.com\/resources\/?p=2851"},"modified":"2021-10-18T08:29:40","modified_gmt":"2021-10-18T08:29:40","slug":"what-is-absolute-positioning","status":"publish","type":"post","link":"https:\/\/elementor.com\/resources\/glossary\/what-is-absolute-positioning\/","title":{"rendered":"What is Absolute Positioning?"},"content":{"rendered":"\n<p><strong>Absolute Positioning <\/strong>is a web design<strong> <\/strong>technique that involves &#8220;breaking the grid&#8221; using <strong>absolute Positioning<\/strong> for elements. This helps create a unique and memorable design while offering a visually compelling user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the Grid?<\/strong><\/h2>\n\n\n\n<p>The primary purpose of graphic design is to establish guidelines for positioning elements in a layout proportionately and at scale. An effective grid provides the design\u2019s rhythm and defines the meter. In addition, a <a href=\"https:\/\/elementor.com\/blog\/grid-design\/\">grid<\/a> is an integral part of making content accessible and helping viewers understand where to locate the next piece of information within the l<a href=\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\">ayout<\/a>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Position&nbsp;Property<\/strong><\/h2>\n\n\n\n<p>Several position properties specify the type of positioning method used for an element. Elements are then positioned using the top, bottom, right, and left properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value. There are five different position values: static, relative, fixed, absolute, or sticky.&nbsp;<\/p>\n\n\n\n<p>For instance:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the Static Position, the element is in its natural state, positioned simply by the natural flow of the page. This is the default position of all elements.<\/li><li>In the<strong> Absolute Position<\/strong>,&nbsp;the element is positioned absolutely to its first positioned parent.<\/li><li>In the Fixed Position, the element is positioned relative to the user\u2019s viewport.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Break the Grid?<\/strong><\/h2>\n\n\n\n<p>Breaking the grid with <strong>Absolute Positioning<\/strong> is an effective way to create a striking design in the split second it takes for site visitors to <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/form-builder\/\"   title=\"form\" data-wpil-keyword-link=\"linked\">form<\/a> an opinion about your website.\u200b Once <strong>Absolute Positioning <\/strong>for elements needed coding skills, particularly CSS.&nbsp;<\/p>\n\n\n\n<p>Today, <a href=\"https:\/\/elementor.com\/blog\/best-free-wordpress-plugins\/\">WordPress plugins<\/a> offer more options. <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\"   title=\"Elementor\" data-wpil-keyword-link=\"linked\">Elementor<\/a> (v2.5), for instance, provides advanced position capabilities that make it easier and faster to create custom and flexible layouts code-free. Elementor users can select any widget, go to Advanced, select &#8216;Custom Positioning,&#8217; and choose &#8216;Position: Absolute.&#8217; Next, you can drag the widget to any place on the page, regardless of the grid.<\/p>\n\n\n\n<p>Using Absolute Positioning breaks a responsive design \u2013 in other words, an item won&#8217;t fit into the canvas of another screen like that of a handheld. However, Elementor solves the problem with designers establishing a distinct custom position for mobile, tablet, and desktop devices. It is possible to use percentage, VH, VW, or pixel units to position your element. An \u201cOverflow Hidden\u201d control also reduces all section widgets and removes any unwanted scrolls.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Absolute Positioning is a web design technique that involves &#8220;breaking the grid&#8221; using absolute Positioning for elements. This helps create a unique and memorable design while offering a visually compelling user experience<\/p>\n","protected":false},"author":1292159,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_angie_page":false,"page_builder":"","footnotes":""},"categories":[15,29],"tags":[16],"class_list":["post-2851","post","type-post","status-publish","format-standard","hentry","category-glossary","category-web-design","tag-build"],"acf":[],"_links":{"self":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/users\/1292159"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/comments?post=2851"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2851\/revisions"}],"predecessor-version":[{"id":2854,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2851\/revisions\/2854"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/media?parent=2851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/categories?post=2851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/tags?post=2851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}