{"id":2901,"date":"2021-11-01T12:41:50","date_gmt":"2021-11-01T12:41:50","guid":{"rendered":"https:\/\/elementor.com\/resources\/?p=2901"},"modified":"2021-11-01T12:41:51","modified_gmt":"2021-11-01T12:41:51","slug":"what-is-fixed-positioning-in-web-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/resources\/glossary\/what-is-fixed-positioning-in-web-design\/","title":{"rendered":"What is Fixed Positioning in Web Design?"},"content":{"rendered":"\n<p>A <strong>Fixed Position <\/strong>is one of six values for the&nbsp;position property where the element is placed relative to the user&#8217;s viewport or the actual browser window. The viewport doesn&#8217;t change when the window is scrolled, so an element in a <strong>Fixed Position<\/strong> is unaffected by scrolling.<\/p>\n\n\n\n<p>The primary purpose of graphic design is to create guidelines for <a href=\"https:\/\/elementor.com\/help\/how-to-set-absolute-position-for-an-element\/\">positioning elements<\/a> in a layout proportionately and at scale. An effective <a href=\"https:\/\/elementor.com\/blog\/grid-design\/\">grid<\/a> defines a design\u2019s rhythm and meter. Additionally, a grid makes content accessible by helping viewers know where to find the following information in the layout.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the Position&nbsp;Property?<\/strong><\/h2>\n\n\n\n<p>Several position properties specify the type of element positioning method a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/web-designer-vs-web-developer\/\"   title=\"web designer\" data-wpil-keyword-link=\"linked\">web designer<\/a> will use. Elements are positioned using the top, bottom, right, and left properties. However, the properties will not work unless the position property is set.&nbsp;<\/p>\n\n\n\n<p>Properties also work differently depending on the position value. There are five position values: absolute, static, relative, fixed, and sticky.&nbsp;<\/p>\n\n\n\n<p>For instance:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Static is the default position for every page element. The element is in its natural state, positioned simply by the natural flow of the page.&nbsp;<\/li><li>Absolute is a powerful method where you can place any page element exactly where you want it.<\/li><li>In the <strong>Fixed Position<\/strong>, the element is positioned relative to the user\u2019s viewport.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Use the Fixed Position?<\/strong><\/h2>\n\n\n\n<p>In the fixed position, the element is removed from the document flow as with absolute positioned elements. Thus, they behave almost identically, breaking the grid to create a unique design, except fixed positioned elements are always relative to the document, not any particular parent, and unaffected by scrolling.\u00a0<\/p>\n\n\n\n<p><br>The fixed position may be used for a <a href=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\">navigation bar<\/a>, for example, that you wish to keep visible at all times irrespective of a page\u2019s scroll position. To avoid a fixed positioned element overlapping content making it inaccessible, ensure you have enough space to prevent it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Fixed Position is one of six values for the position property where the element is placed relative to the user&#8217;s viewport or the actual browser window<\/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-2901","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\/2901","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=2901"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2901\/revisions"}],"predecessor-version":[{"id":2902,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2901\/revisions\/2902"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/media?parent=2901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/categories?post=2901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/tags?post=2901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}