{"id":3808,"date":"2020-06-04T14:57:26","date_gmt":"2020-06-04T09:27:26","guid":{"rendered":"https:\/\/www.sanjaywebdesigner.com\/articles\/?p=3808"},"modified":"2020-06-04T15:17:36","modified_gmt":"2020-06-04T09:47:36","slug":"difference-between-relative-and-absolute-positioning","status":"publish","type":"post","link":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/","title":{"rendered":"Difference between relative and absolute positioning"},"content":{"rendered":"<div class=\"4b5c905834746893f548144bd2becc18\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<!-- blog last -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:inline-block;width:336px;height:280px\"\r\n     data-ad-client=\"ca-pub-8831529092902674\"\r\n     data-ad-slot=\"8814291746\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\n<\/div>\n<h1>Difference between relative and absolute positioning<\/h1>\n<p><a href=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3809\" src=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg\" alt=\"Difference between relative and absolute positioning \" width=\"1280\" height=\"720\" srcset=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg 1280w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details-300x169.jpg 300w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details-1024x576.jpg 1024w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details-768x432.jpg 768w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details-660x371.jpg 660w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<h2>Relative Positioning<\/h2>\n<ul>\n<li>When position:relative is given to an element without any other attributes (top, bottom, left, right) nothing will happen.<\/li>\n<li>But when an attribute left:20px is added the element moves 20px to the right from its normal position. The element effects no other element on the layout. Other content will not be adjusted to fit into any gap left by the element.<\/li>\n<li>The child of this element can be positioned within this block only. So position:relative has its limitations.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3810\" src=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative.png\" alt=\"Position Relative\" width=\"1896\" height=\"2250\" srcset=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative.png 1896w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative-253x300.png 253w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative-863x1024.png 863w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative-768x911.png 768w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative-1294x1536.png 1294w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative-1726x2048.png 1726w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-relative-660x783.png 660w\" sizes=\"auto, (max-width: 1896px) 100vw, 1896px\" \/><\/a><\/p>\n<p>HTML CODE<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;DIFFERENCE BETWEEN POSITION RELATIVE AND POSITION ABSOLUTE&lt;\/title&gt;\r\n&lt;link href=\"example.css\" rel=\"stylesheet\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div id=\"a1\"&gt;FIRST&lt;\/div&gt;\r\n  &lt;div id=\"a2\"&gt;SECOND&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>CSS CODE<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">@charset \"utf-8\";\r\n\/* CSS Document *\/\r\n#a1\t{\r\n  width:304px;\r\n  height:154px;\r\n  background-color:white;\r\n  border:2px solid blue;\r\n  position:relative;\r\n  text-align:center;\r\n}\r\n#a2\t{\r\n  width:304px;\r\n  height:154px;\r\n  background-color:white;\r\n  border:2px solid orange;\r\n  top:70px;\r\n  left:30px;\r\n  position:relative;\r\n  text-align:center;\r\n}\r\n<\/pre>\n<h2>Absolute Positioning<\/h2>\n<ul>\n<li>When position:absolute is given to an element the element can be placed precisely where one wants to.<\/li>\n<li>The element is positioned nearest to the first relatively or absolutely positioned parent element.<\/li>\n<li>When there is no parent element the absolutely positioned element is positioned directly to the HTML page itself.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3811\" src=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute.png\" alt=\"Position Absolute\" width=\"3032\" height=\"2250\" srcset=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute.png 3032w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute-300x223.png 300w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute-1024x760.png 1024w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute-768x570.png 768w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute-1536x1140.png 1536w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute-2048x1520.png 2048w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/position-absolute-660x490.png 660w\" sizes=\"auto, (max-width: 3032px) 100vw, 3032px\" \/><\/a><\/p>\n<p>HTML CODE<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;ABSOLUTE POSITIONING&lt;\/title&gt;\r\n&lt;link href=\"example1.css\" rel=\"stylesheet\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div class=\"a1\"&gt;\r\n  &lt;div class=\"a2\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>CSS CODE<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">@charset \"utf-8\";\r\n\/* CSS Document *\/\r\n.a1\t{\r\n  width:304px;\r\n  height:304px;\r\n  background-color:white;\r\n  border:3px solid blue;\r\n  text-align:center;\r\n  position:relative;\r\n}\r\n.a2\t{\r\n  width:154px;\r\n  height:154px;\r\n  background-color:white;\r\n  border:3px solid orange;\r\n  text-align:center;\r\n  position:absolute;\r\n  top:100px;\r\n  left:40px;\r\n}\r\n<\/pre>\n<p>For more details about <a href=\"https:\/\/www.sanjaywebdesigner.com\/\">HTML CSS<\/a><\/p>\n<p>Article written by HARSHAL ARORA<\/p>\n<p>8368443489<\/p>\n<p>9873405903<\/p>\n<p>arora.harshal@gmail.com<\/p>\n<p>Contact me on <a href=\"https:\/\/www.facebook.com\/profile.php?id=100002520460705\">Facebook<\/a><\/p>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Difference between relative and absolute positioning Relative Positioning When position:relative is given to an element without any other attributes (top, bottom, left, right) nothing will happen. But when an attribute left:20px is added the element moves 20px to the right from its normal position. The element effects no other element on the layout. Other content [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":3809,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1373,1372,22],"tags":[1374,1375,1376,1377,1378,1379],"class_list":["post-3808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-html5-css3-courses-in-delhi","tag-difference-between-relative-and-absolute-positioning","tag-difference-between-relative-and-absolute-positioning-in-delhi","tag-difference-between-relative-and-absolute-positioning-in-india","tag-relative-and-absolute-positioning","tag-relative-and-absolute-positioning-in-delhi","tag-relative-and-absolute-positioning-in-india"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Difference Between Relative and Absolute Positioning<\/title>\n<meta name=\"description\" content=\"Difference Between Relative and Absolute Positioning - In relative positioning the element is positioned relative to its position,so there are some limitations. in absolute positioning the element can be placed precisely where we want it to.\" \/>\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.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Difference Between Relative and Absolute Positioning\" \/>\n<meta property=\"og:description\" content=\"Difference Between Relative and Absolute Positioning - In relative positioning the element is positioned relative to its position,so there are some limitations. in absolute positioning the element can be placed precisely where we want it to.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/\" \/>\n<meta property=\"og:site_name\" content=\"Sanjay Web Designer\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sanjaywebdesigner\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-04T09:27:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-04T09:47:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sanjay Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Difference Between Relative and Absolute Positioning\" \/>\n<meta name=\"twitter:description\" content=\"Difference Between Relative and Absolute Positioning - In relative positioning the element is positioned relative to its position,so there are some limitations. in absolute positioning the element can be placed precisely where we want it to.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@sanjaywebdesign\" \/>\n<meta name=\"twitter:site\" content=\"@sanjaywebdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/\"},\"author\":{\"name\":\"Sanjay Jain\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7013e58aaefa0607a58fdb91888de833\"},\"headline\":\"Difference between relative and absolute positioning\",\"datePublished\":\"2020-06-04T09:27:26+00:00\",\"dateModified\":\"2020-06-04T09:47:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/\"},\"wordCount\":173,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg\",\"keywords\":[\"Difference between relative and absolute positioning\",\"Difference between relative and absolute positioning in Delhi\",\"Difference between relative and absolute positioning in India\",\"Relative and absolute positioning\",\"Relative and absolute positioning in Delhi\",\"Relative and absolute positioning in India\"],\"articleSection\":[\"CSS\",\"HTML\",\"HTML5 &amp; CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/\",\"name\":\"Difference Between Relative and Absolute Positioning\",\"isPartOf\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg\",\"datePublished\":\"2020-06-04T09:27:26+00:00\",\"dateModified\":\"2020-06-04T09:47:36+00:00\",\"description\":\"Difference Between Relative and Absolute Positioning - In relative positioning the element is positioned relative to its position,so there are some limitations. in absolute positioning the element can be placed precisely where we want it to.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#primaryimage\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg\",\"contentUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg\",\"width\":1280,\"height\":720,\"caption\":\"Difference between relative and absolute positioning\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#website\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/\",\"name\":\"Sanjay Web Designer\",\"description\":\"Learn Web Designing &amp; Graphic Designing in Depth\",\"publisher\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\",\"name\":\"Sanjay Web Designer\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png\",\"contentUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png\",\"width\":240,\"height\":72,\"caption\":\"Sanjay Web Designer\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sanjaywebdesigner\",\"https:\/\/x.com\/sanjaywebdesign\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7013e58aaefa0607a58fdb91888de833\",\"name\":\"Sanjay Jain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/661807705d23debee3ca86318320b24f983b9ef8a34301cf6e40545f1d6d25db?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/661807705d23debee3ca86318320b24f983b9ef8a34301cf6e40545f1d6d25db?s=96&d=mm&r=g\",\"caption\":\"Sanjay Jain\"},\"sameAs\":[\"http:\/\/www.sanjaywebdesigner.com\/\"],\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/author\/sanjay\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Difference Between Relative and Absolute Positioning","description":"Difference Between Relative and Absolute Positioning - In relative positioning the element is positioned relative to its position,so there are some limitations. in absolute positioning the element can be placed precisely where we want it to.","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.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/","og_locale":"en_US","og_type":"article","og_title":"Difference Between Relative and Absolute Positioning","og_description":"Difference Between Relative and Absolute Positioning - In relative positioning the element is positioned relative to its position,so there are some limitations. in absolute positioning the element can be placed precisely where we want it to.","og_url":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/","og_site_name":"Sanjay Web Designer","article_publisher":"https:\/\/www.facebook.com\/sanjaywebdesigner","article_published_time":"2020-06-04T09:27:26+00:00","article_modified_time":"2020-06-04T09:47:36+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg","type":"image\/jpeg"}],"author":"Sanjay Jain","twitter_card":"summary_large_image","twitter_title":"Difference Between Relative and Absolute Positioning","twitter_description":"Difference Between Relative and Absolute Positioning - In relative positioning the element is positioned relative to its position,so there are some limitations. in absolute positioning the element can be placed precisely where we want it to.","twitter_image":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg","twitter_creator":"@sanjaywebdesign","twitter_site":"@sanjaywebdesign","twitter_misc":{"Written by":"Sanjay Jain","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#article","isPartOf":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/"},"author":{"name":"Sanjay Jain","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7013e58aaefa0607a58fdb91888de833"},"headline":"Difference between relative and absolute positioning","datePublished":"2020-06-04T09:27:26+00:00","dateModified":"2020-06-04T09:47:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/"},"wordCount":173,"commentCount":0,"publisher":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg","keywords":["Difference between relative and absolute positioning","Difference between relative and absolute positioning in Delhi","Difference between relative and absolute positioning in India","Relative and absolute positioning","Relative and absolute positioning in Delhi","Relative and absolute positioning in India"],"articleSection":["CSS","HTML","HTML5 &amp; CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/","name":"Difference Between Relative and Absolute Positioning","isPartOf":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#primaryimage"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg","datePublished":"2020-06-04T09:27:26+00:00","dateModified":"2020-06-04T09:47:36+00:00","description":"Difference Between Relative and Absolute Positioning - In relative positioning the element is positioned relative to its position,so there are some limitations. in absolute positioning the element can be placed precisely where we want it to.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/difference-between-relative-and-absolute-positioning\/#primaryimage","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg","contentUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2020\/06\/Relative-Absolute-Positioning-Explained-in-Details.jpg","width":1280,"height":720,"caption":"Difference between relative and absolute positioning"},{"@type":"WebSite","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#website","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/","name":"Sanjay Web Designer","description":"Learn Web Designing &amp; Graphic Designing in Depth","publisher":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sanjaywebdesigner.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization","name":"Sanjay Web Designer","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png","contentUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png","width":240,"height":72,"caption":"Sanjay Web Designer"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sanjaywebdesigner","https:\/\/x.com\/sanjaywebdesign"]},{"@type":"Person","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7013e58aaefa0607a58fdb91888de833","name":"Sanjay Jain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/661807705d23debee3ca86318320b24f983b9ef8a34301cf6e40545f1d6d25db?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/661807705d23debee3ca86318320b24f983b9ef8a34301cf6e40545f1d6d25db?s=96&d=mm&r=g","caption":"Sanjay Jain"},"sameAs":["http:\/\/www.sanjaywebdesigner.com\/"],"url":"https:\/\/www.sanjaywebdesigner.com\/articles\/author\/sanjay\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/3808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/comments?post=3808"}],"version-history":[{"count":3,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/3808\/revisions"}],"predecessor-version":[{"id":3814,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/3808\/revisions\/3814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/media\/3809"}],"wp:attachment":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/media?parent=3808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/categories?post=3808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/tags?post=3808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}