{"id":5178,"date":"2015-06-30T12:15:42","date_gmt":"2015-06-30T09:15:42","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5178"},"modified":"2018-01-08T14:22:38","modified_gmt":"2018-01-08T12:22:38","slug":"css-absolute-position-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/","title":{"rendered":"CSS Absolute Position Example"},"content":{"rendered":"<p>The aim of this example is to explain the usage of absolute positioning.<\/p>\n<p>This is a very powerful type of positioning that allows you to literally place any page element exactly where you want inside the webpage.<\/p>\n<p>Remember that these values will be relative to the next parent element<br \/>\nwith relative (or absolute) positioning. If there is no such parent?<\/p>\n<p>Well, it will by default go all the way back up to the  element itself meaning it will be placed relatively to the page itself.<\/p>\n<p>Lets first see basic application, and then go into more advanced stuff.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<\/p>\n<h2>1. Basic Setup &amp; Application <\/h2>\n<p>Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;CSS3 Absolute Position Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- STYLE SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;!-- HTML SECTION --&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Now, to apply this property first add an element in html and then give it an absolute position, ie a level 2 heading:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;h2&gt;This text is positioned absolutely right&lt;\/h2&gt;\r\n<\/pre>\n<p>Now give it the <code>position: absolute;<\/code> in css and some top and left alignment:<\/p>\n<pre class=\"brush:css\">\r\nh2 {\r\n\tposition: absolute;\r\n\ttop: 50px;\r\n\tleft: 60px;\r\n}\r\n<\/pre>\n<p>The result would be a text positioned absolutely according to the values we gave:<br \/>\n<figure id=\"attachment_5197\" aria-describedby=\"caption-attachment-5197\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute1.jpg\" alt=\"Absolute Positioning Basic Application\" width=\"820\" height=\"235\" class=\"size-full wp-image-5197\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute1-300x86.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5197\" class=\"wp-caption-text\">Absolute Positioning Basic Application<\/figcaption><\/figure><\/p>\n<h2>2. Cases and Examples <\/h2>\n<p>In this sections we are going to see some examples of the usage of absolute positioning.<\/p>\n<h3>2.1 Positioning an Image <\/h3>\n<p>Our task here will be to position an image in the middle of the ending line of a box. I have set up the html like below:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- Example One --&gt;\r\n&lt;div class=\"wrapper\"&gt;\r\n&lt;div class=\"box\"&gt;\r\n&lt;div class=\"header\"&gt;&lt;p&gt;This is the absolute positioning example.&lt;\/p&gt;&lt;\/div&gt;\r\n&lt;div class=\"body\"&gt;Basically, I want to add an image to the middle of the right bottom ending line of this box.&lt;\/div&gt;\r\n&lt;img src=\"image.jpg\"&gt;\r\n&lt;\/div&gt;&lt;!-- end box --&gt;\r\n&lt;\/div&gt;&lt;!-- end wrapper --&gt;\r\n<\/pre>\n<p>And added this css to make it look like a box with some text and an image:<\/p>\n<pre class=\"brush:css\">\r\n\/* Example 1 *\/\r\n.box {\r\n\twidth: 40em;\r\n\theight: 25em;\r\n\tbackground-color: #fff;\r\n\tborder: 1px solid #ccc;\r\n\tmargin: 5em 4em;\r\n}\r\n\r\n.header {\r\n\twidth: inherit;\r\n\theight: 3em;\r\n\tbackground-color: #cbcbcb;\r\n\tborder: inherit;\r\n\ttext-align: center;\r\n}\r\n\r\nimg {\r\n\tright: 0px;\r\n\tbottom: 0px;\r\n\tborder: 5px solid #ccc;\r\n}\r\n<\/pre>\n<p>For now, the view without any position application would be:<br \/>\n<figure id=\"attachment_5199\" aria-describedby=\"caption-attachment-5199\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute2.jpg\" alt=\"Before Applying Absolute Positioning\" width=\"820\" height=\"463\" class=\"size-full wp-image-5199\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute2-300x169.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5199\" class=\"wp-caption-text\">Before Applying Absolute Positioning<\/figcaption><\/figure><\/p>\n<p>Now, because I want to make the image sit in the lower right bottom of the line of the box, I am first giving the box<br \/>\na relative positioning and then an absolute positioning to the image, this is because the image will be positioned absolute taking the box as the refer div. After these touches in css the code will look like this:<\/p>\n<pre class=\"brush:css\">\r\n\/* Example 1 *\/\r\n.box {\r\n\twidth: 40em;\r\n\theight: 25em;\r\n\tbackground-color: #fff;\r\n\tborder: 1px solid #ccc;\r\n\tmargin: 5em 4em;\r\n\tposition: relative; \t\/* added relative positioning *\/\r\n}\r\n\r\n.header {\r\n\twidth: inherit;\r\n\theight: 3em;\r\n\tbackground-color: #cbcbcb;\r\n\tborder: inherit;\r\n\ttext-align: center;\r\n}\r\n\r\nimg {\t\t\r\n\tright: 50px;\t\t\t\/* algined 50px far from the right line *\/\r\n\tbottom: -120px;\t\t\t\/* algined 120px below the actual position *\/\r\n\tposition: absolute;   \t\/* added absolute positioning *\/\r\n\tborder: 5px solid #ccc;\r\n}\r\n<\/pre>\n<p>The view, as you&#8217;d expect, would be:<br \/>\n<figure id=\"attachment_5203\" aria-describedby=\"caption-attachment-5203\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute3.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute3.jpg\" alt=\"Absolute Positioning applied to an Image\" width=\"820\" height=\"551\" class=\"size-full wp-image-5203\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute3-300x202.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5203\" class=\"wp-caption-text\">Absolute Positioning applied to an Image<\/figcaption><\/figure><\/p>\n<h3>2.2 Positioning Several Elements<\/h3>\n<p>Look how we can create a beautiful content out of an image and some text with the help of positioning. Consider this html:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- example two --&gt;\r\n&lt;h3&gt;I am the title!&lt;\/h3&gt;\r\n&lt;p&gt; I am a short description of the image.&lt;\/p&gt;\r\n&lt;img class=\"ex3\" src=\"image.jpg\"&gt;\r\n<\/pre>\n<p>It would look like this without css or any positioning:<br \/>\n<figure id=\"attachment_5206\" aria-describedby=\"caption-attachment-5206\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute4.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute4.jpg\" alt=\"Another Example - Pre-Application of Positioing\" width=\"820\" height=\"403\" class=\"size-full wp-image-5206\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute4-300x147.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5206\" class=\"wp-caption-text\">Another Example &#8211; Pre-Application of Positioing<\/figcaption><\/figure><br \/>\nNow, consider the following css which gives the text a white color, relative positioning to the image and absolute to the <\/p>\n<p>other two text elements which will sit inside the image, then with some spacing around the corners and giving a z-index:<\/p>\n<pre class=\"brush:css\">\r\n\/* Example 2 *\/\r\n\r\nh3 {\r\n\tposition: absolute;\r\n\ttop: 0px;\r\n\tleft: 20px;\r\n\tcolor: white;\r\n\tz-index: 1;\r\n}\r\n\r\n.ex3 {\r\n\tposition: relative;\r\n}\r\n\r\np {\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\tcolor: white;\r\n\ttop: 210px;\r\n\tleft: 20px;\r\n}\r\n<\/pre>\n<p>This time, the view in the browser would be:<br \/>\n<figure id=\"attachment_5207\" aria-describedby=\"caption-attachment-5207\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute5.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute5.jpg\" alt=\"Image Content using Absolute Positioning.\" width=\"820\" height=\"403\" class=\"size-full wp-image-5207\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute5.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/absolute5-300x147.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5207\" class=\"wp-caption-text\">Image Content using Absolute Positioning.<\/figcaption><\/figure><\/p>\n<h2>3. Conclusion<\/h2>\n<p>To conclude, we can say that positioning is an essential concept in CSS and will probably be neccessary to align your icons next to an input field inside a form, or whenever you want to sit elements in some constrained zones in the page. <\/p>\n<p>It provides  a easy way to do that with support on all browsers. However do remember that positioning is very well optimized in front-end frameworks which make the best use of it so as not to affect other elements.<\/p>\n<h2>4. Download <\/h2>\n<p>Remember to uncomment the examples you want to see because it results in a layout mess if you have them all.<\/p>\n<div class=\"download\">\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/06\/CSS3-Absolute-Position.zip\"><strong>CSS3 Absolute Position<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The aim of this example is to explain the usage of absolute positioning. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want inside the webpage. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If &hellip;<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Absolute Position Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to explain the usage of absolute positioning. This is a very powerful type of positioning that allows you to literally place\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Absolute Position Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to explain the usage of absolute positioning. This is a very powerful type of positioning that allows you to literally place\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-30T09:15:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:22:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\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:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Absolute Position Example\",\"datePublished\":\"2015-06-30T09:15:42+00:00\",\"dateModified\":\"2018-01-08T12:22:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/\"},\"wordCount\":590,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/\",\"name\":\"CSS Absolute Position Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-06-30T09:15:42+00:00\",\"dateModified\":\"2018-01-08T12:22:38+00:00\",\"description\":\"The aim of this example is to explain the usage of absolute positioning. This is a very powerful type of positioning that allows you to literally place\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Absolute Position Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Absolute Position Example - Web Code Geeks - 2026","description":"The aim of this example is to explain the usage of absolute positioning. This is a very powerful type of positioning that allows you to literally place","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:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Absolute Position Example - Web Code Geeks - 2026","og_description":"The aim of this example is to explain the usage of absolute positioning. This is a very powerful type of positioning that allows you to literally place","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-06-30T09:15:42+00:00","article_modified_time":"2018-01-08T12:22:38+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Absolute Position Example","datePublished":"2015-06-30T09:15:42+00:00","dateModified":"2018-01-08T12:22:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/"},"wordCount":590,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/","name":"CSS Absolute Position Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-06-30T09:15:42+00:00","dateModified":"2018-01-08T12:22:38+00:00","description":"The aim of this example is to explain the usage of absolute positioning. This is a very powerful type of positioning that allows you to literally place","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-absolute-position-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Absolute Position Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5178"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5178\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}