{"id":23585,"date":"2019-03-27T10:10:23","date_gmt":"2019-03-27T10:10:23","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=23585"},"modified":"2025-12-05T11:03:08","modified_gmt":"2025-12-05T09:03:08","slug":"5-uses-absolute-positioning","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/","title":{"rendered":"5 Uses of Absolute Positioning"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

It only takes a fraction of a second for visitors to form an opinion about a website. This first impression largely depends on the site’s design; striking design is far more memorable. One of the most effective ways of creating unique design is by breaking the grid.<\/p>

Web designers often hear that the grid is a designer’s best friend. That’s true \u2014 the grid helps define the structure of a page. At the same time, the grid can limit creativity. In an attempt to make the layout more visually appealing, designers break the grid by using absolute positioning for elements.<\/p>

For a long time, absolute positioning<\/a> for elements required coding skills. Designers had to define custom CSS<\/a> styles for elements that would have absolute positioning. With Elementor v2.5 this is no longer the case. Elementor introduced flexible layout \u2014 a set of advanced position capabilities that make it much easier (and faster) to create custom layouts.<\/p>

In this article, I want to show how to use absolute positioning and review five layouts that use this technique to create visually compelling experiences.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Absolute Positioning in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Elementor brings web designers the magic of position absolute. The great thing about this feature is that you don\u2019t dive into any code to create it. As an Elementor user, you can select any widget, go to Advanced<\/em>, select \u2018Custom Positioning<\/em>\u2019 and choose \u2018Position: Absolute.<\/em>\u2019 After that, you will be able to drag the widget to any location on the page, regardless of the grid.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"1\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If you’re an experienced web designer, you may wonder \u201cHow does it work for responsive design?\u201d It’s a well-known fact that absolutely positioning breaks a responsive design \u2014 if you use absolute positioning on an item and don’t adjust it for various screen sizes, you’ll end up with a situation where your item goes off the canvas. A wrongly positioned object can either not display on some screens (usually, on mobile), or it can increase the total canvas area (meaning the page will overflow the viewport, and the visitor will need to scroll through tons of whitespace).<\/p>

The Elementor team is familiar with this problem and solves it by allowing designers to set a separate custom position for mobile, tablet, and desktop devices. It’s possible to use percentage, VH, VW or pixel units to position your element. They also added an Overflow Hidden<\/em> control, which condenses all of the section widgets inside it and removes any unwanted scrolls.<\/p>

Now let’s see how you can use absolute positioning to create a unique design:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

1. The Power of Imagery<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

They say that an image says more than a thousand words and that\u2019s true. Imagery is a powerful tool in a designer\u2019s toolkit. The right imagery can give users a clear idea of what the site is all about, even before they read any text on the page.<\/p>

Take a look at The Cat Fair! layout. The Gallery section of this layout features a few photos of cats distributed unusually. This design decision creates visual interest and directs the visitor\u2019s attention to the Tickets. As a result, the imagery both portrays context and adds to the user\u2019s delight.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"The\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

2. Badges<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Badges are often used in product design to demonstrate attributes that the product or service has. Badges are so popular because they reduce the time required for users to understand the message.<\/p>

In the following example, designers chose to place the badge \u2018Good Food\u2019 on top of the image. This badge paired with the image gives users the idea of the level of quality even before they read the text on the right. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Magazine\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

3. One Image on Top of the Other<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

How can you combine two separate images in one perfect scene? The answer is simple \u2014 you need to open your favorite graphics editor and merge the photos. With Elementor you can follow a much more relaxed approach.<\/p>

The illustrations of a skater, a ramp and a small bottle on top of the ramp you see below are not one single image. Actually, it\u2019s a composition of three image widgets – the ramp is used as a background, while the bottle and the skater were placed on top of it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"One\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

4. Using Color as a Functional Element<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Color is a powerful tool in a designer’s toolkit. Many designers use color to create real aesthetics. However, it\u2019s also possible to use color as a functional element – to grab or direct a user\u2019s attention. Sometimes, designers use colors to tell a story.<\/p>

In the following example, designers use vibrant colors to create an emotional bond with users. Colors draw visitors into the design and make them scroll for more. If you decide to follow a similar approach, it\u2019s recommended to use colors from the Material Design<\/a> palette.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Using\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

5. The Power of Minimalism<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

It’s a fairly common misconception, that to create a genuinely remarkable design, you have to put a lot of different elements on a page. The real power of designers lies in the ability to achieve more with less.<\/p>

Check out the following example. This landing page<\/a> features only the key message, which is located at the center of the screen; simple geometric shapes are distributed around the message slightly chaotically yet balanced. The artistic quality of the background makes a good impression on visitors, increasing engagement.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"The\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Elementor v2.5 gives designers a new superpower \u2014 absolute positioning. And this power offers much more creative freedom. But with great power comes great responsibility. As designers, our goal is to create not only beautiful but also usable designs.<\/p>

That\u2019s why the Elementor team mentions that \u2018Taking widgets outside of the grid by applying position absolute has its risks since the element is no longer tied to the rest of the page structure.<\/em>\u2019 Use absolute positioning sparingly and always test how your design looks and works on different screen sizes, using Elementor\u2019s built-in preview feature.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Breaking the grid with absolute positioning is an effective way of creating a unique design. In this article, we’ll demonstrate how to use this technique to create visually compelling experiences.\u200b<\/p>\n","protected":false},"author":8813,"featured_media":23895,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17,32],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-23585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration","category-design","tag-build"],"acf":[],"yoast_head":"\n5 Uses of Absolute Positioning<\/title>\n<meta name=\"description\" content=\"Breaking the grid with absolute positioning is an effective way of creating a unique design. In this article, we'll demonstrate how to use this technique to create visually compelling experiences.\u200b\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Uses of Absolute Positioning\" \/>\n<meta property=\"og:description\" content=\"Breaking the grid with absolute positioning is an effective way of creating a unique design. In this article, we'll demonstrate how to use this technique to create visually compelling experiences.\u200b\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-27T10:10:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-05T09:03:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nick Babich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Babich\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/\"},\"author\":{\"name\":\"Nick Babich\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda\"},\"headline\":\"5 Uses of Absolute Positioning\",\"datePublished\":\"2019-03-27T10:10:23+00:00\",\"dateModified\":\"2025-12-05T09:03:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/\"},\"wordCount\":997,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg\",\"keywords\":[\"Build\"],\"articleSection\":[\"Inspiration\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/\",\"url\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/\",\"name\":\"5 Uses of Absolute Positioning\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg\",\"datePublished\":\"2019-03-27T10:10:23+00:00\",\"dateModified\":\"2025-12-05T09:03:08+00:00\",\"description\":\"Breaking the grid with absolute positioning is an effective way of creating a unique design. In this article, we'll demonstrate how to use this technique to create visually compelling experiences.\u200b\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inspiration\",\"item\":\"https:\/\/elementor.com\/blog\/category\/inspiration\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"5 Uses of Absolute Positioning\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"description\":\"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.\",\"sameAs\":[\"http:\/\/babich.biz\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/nickb\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 Uses of Absolute Positioning","description":"Breaking the grid with absolute positioning is an effective way of creating a unique design. In this article, we'll demonstrate how to use this technique to create visually compelling experiences.\u200b","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:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/","og_locale":"en_US","og_type":"article","og_title":"5 Uses of Absolute Positioning","og_description":"Breaking the grid with absolute positioning is an effective way of creating a unique design. In this article, we'll demonstrate how to use this technique to create visually compelling experiences.\u200b","og_url":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-03-27T10:10:23+00:00","article_modified_time":"2025-12-05T09:03:08+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg","type":"image\/jpeg"}],"author":"Nick Babich","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Nick Babich","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/"},"author":{"name":"Nick Babich","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda"},"headline":"5 Uses of Absolute Positioning","datePublished":"2019-03-27T10:10:23+00:00","dateModified":"2025-12-05T09:03:08+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/"},"wordCount":997,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg","keywords":["Build"],"articleSection":["Inspiration","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/","url":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/","name":"5 Uses of Absolute Positioning","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg","datePublished":"2019-03-27T10:10:23+00:00","dateModified":"2025-12-05T09:03:08+00:00","description":"Breaking the grid with absolute positioning is an effective way of creating a unique design. In this article, we'll demonstrate how to use this technique to create visually compelling experiences.\u200b","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/03\/Cover-2019.03.19-Absolute-Positioning-b.jpg","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Inspiration","item":"https:\/\/elementor.com\/blog\/category\/inspiration\/"},{"@type":"ListItem","position":3,"name":"5 Uses of Absolute Positioning"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/76af12300742977a3c60944fea91ffda","name":"Nick Babich","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","caption":"Nick Babich"},"description":"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.","sameAs":["http:\/\/babich.biz"],"url":"https:\/\/elementor.com\/blog\/author\/nickb\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/23585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/8813"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=23585"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/23585\/revisions"}],"predecessor-version":[{"id":146727,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/23585\/revisions\/146727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/23895"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=23585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=23585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=23585"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=23585"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=23585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}