{"id":74226,"date":"2020-01-17T11:48:45","date_gmt":"2020-01-17T06:18:45","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74226"},"modified":"2024-04-12T14:23:22","modified_gmt":"2024-04-12T08:53:22","slug":"relative-positioning-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/","title":{"rendered":"Relative Positioning"},"content":{"rendered":"<p>In it an element will shift relative to its starting point by setting a vertical or horizontal position. If the top position is set to be 20 pixels, then the box will appear 20 pixels below the top of its original position and if the left position is set to 20 pixels then it will create a 20-pixel space on the left of the element, moving the element to the right. Its usage is illustrated as<\/p>\n<p>#box2 {<br \/>\nposition: relative;<br \/>\nleft: 20px;<br \/>\ntop: 20px;<br \/>\n}<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-64209\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png\" alt=\"Relative Positioning\" width=\"592\" height=\"243\" \/><\/p>\n<p>With relative positioning, the element continues to occupy the original space, whether or not it is offset. As such, offsetting the element can cause it to overlap other boxes.<\/p>\n<p>Elements with a relative position can be used as a point of reference for elements nested within them that are absolutely positioned. The position of a relatively positioned element can be adjusted using the offset properties. A relatively positioned element can have a position on the z-axis.<\/p>\n<p>If no element\u2019s position is given for reference then the elements are positioned relative to the browser\u2019s viewport.<\/p>\n<h5 id=\"block-07feabc5-3923-4122-ba70-f7cf1db64a8f\" class=\"block-editor-block-list__block wp-block is-selected rich-text block-editor-rich-text__editable is-hovered wp-block\" tabindex=\"0\" role=\"textbox\" contenteditable=\"true\" aria-label=\"Write heading\u2026\" aria-multiline=\"true\" data-block=\"07feabc5-3923-4122-ba70-f7cf1db64a8f\" data-type=\"core\/heading\" data-title=\"Heading\">Go To-\u00a0<a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong>\u00a0<strong>Tutorial<\/strong><\/a><\/h5>\n","protected":false},"excerpt":{"rendered":"<p>In it an element will shift relative to its starting point by setting a vertical or horizontal position. If the top position is set to be 20 pixels, then the box will appear 20 pixels below the top of its original position and if the left position is set to 20 pixels then it will&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[1827],"class_list":["post-74226","page","type-page","status-publish","hentry","category-css3","tag-relative-positioning"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Relative Positioning - Tutorial<\/title>\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.vskills.in\/certification\/tutorial\/relative-positioning-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Relative Positioning - Tutorial\" \/>\n<meta property=\"og:description\" content=\"In it an element will shift relative to its starting point by setting a vertical or horizontal position. If the top position is set to be 20 pixels, then the box will appear 20 pixels below the top of its original position and if the left position is set to 20 pixels then it will...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:22+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/\",\"name\":\"Relative Positioning - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png\",\"datePublished\":\"2020-01-17T06:18:45+00:00\",\"dateModified\":\"2024-04-12T08:53:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Relative Positioning\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Relative Positioning - Tutorial","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.vskills.in\/certification\/tutorial\/relative-positioning-2\/","og_locale":"en_US","og_type":"article","og_title":"Relative Positioning - Tutorial","og_description":"In it an element will shift relative to its starting point by setting a vertical or horizontal position. If the top position is set to be 20 pixels, then the box will appear 20 pixels below the top of its original position and if the left position is set to 20 pixels then it will...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:22+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/","name":"Relative Positioning - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png","datePublished":"2020-01-17T06:18:45+00:00","dateModified":"2024-04-12T08:53:22+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Relative-Positioning-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-positioning-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Relative Positioning"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74226"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74226\/revisions"}],"predecessor-version":[{"id":85689,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74226\/revisions\/85689"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}