{"id":74225,"date":"2020-01-17T11:48:46","date_gmt":"2020-01-17T06:18:46","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74225"},"modified":"2024-04-12T14:23:22","modified_gmt":"2024-04-12T08:53:22","slug":"positioning-introduction-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/","title":{"rendered":"Positioning Introduction"},"content":{"rendered":"<p>The position property is used to assign with accuracy where in a web page an element to appear. An element may appear relative to a container element or to the browser window or can be layered on top of another. Its values are discussed as<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"79\"><strong>Value<\/strong><\/td>\n<td width=\"537\"><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"79\">static<\/td>\n<td width=\"537\">Elements renders in order, as they appear in the document flow.<\/td>\n<\/tr>\n<tr>\n<td width=\"79\">absolute<\/td>\n<td width=\"537\">The element is positioned relative to its first positioned (not static) ancestor element<\/td>\n<\/tr>\n<tr>\n<td width=\"79\">fixed<\/td>\n<td width=\"537\">The element is positioned relative to the browser window<\/td>\n<\/tr>\n<tr>\n<td width=\"79\">relative<\/td>\n<td width=\"537\">The element is positioned relative to its normal position, so &#8220;left:20&#8221; adds 20 pixels to the element&#8217;s LEFT position<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>It is used as<\/p>\n<p>.top { position: absolute; top: 10px; left: 20px; }<\/p>\n<p><strong>Static positioning<\/strong> It is the default positioning for all elements on a web page, which means the element is not positioned and occurs where it normally would in the web page.<\/p>\n<p><strong>Absolute positioning<\/strong> is used to determine an element\u2019s location by specifying a left, right, top, or bottom position in pixels, ems, or percentages. Hence a box can be placed 20 pixels from the top and 200 pixels from the left edge of the page.<\/p>\n<p>Absolutely positioned elements are detached from the flow of the page as determined by the HTML code and other elements on the web page do not even know the absolutely positioned element exists. They can even disappear completely underneath absolutely positioned items, if care is not taken.<\/p>\n<p>Float and absolute or fixed positioning can\u2019t work together on the same element.<\/p>\n<p><strong>Relative positioning<\/strong> is used to place element relative to its current position in the HTML flow. So, giving a top value of 20 pixels and left value of 200 pixels on a relatively positioned element moves that element 20 pixels down and 200 pixels from the left from wherever it would normally appear.<\/p>\n<p>Other page elements accommodate the old HTML placement of a relatively positioned element. As moving an element with relative positioning leaves a \u201chole\u201d where the element would have<\/p>\n<p>been. The main benefit of relative positioning isn\u2019t to move an element, but to set a new point of reference for absolutely positioned elements that are nested inside it.<\/p>\n<p><strong>Fixed<\/strong> <strong>positioning<\/strong>. In it a fixed element is locked into place on the screen. When a visitor scrolls the page, fixed elements remain onscreen as paragraphs and headlines, while photos disappear off the top of the browser window. Fixed elements are a great way to create a fixed sidebar or replicate the effect of HTML frames, where only a certain portion (frame) of web page is always present.<\/p>\n<p>Different positioning is illustrated in the figure as<\/p>\n<table>\n<thead>\n<tr>\n<td width=\"128\"><strong>CSS Value &amp; Code<\/strong><\/td>\n<td width=\"438\"><strong>Browser output<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td width=\"128\">static<\/p>\n<p>#div-1<\/p>\n<p>{<\/p>\n<p>position:static;<\/p>\n<p>}<\/td>\n<td width=\"438\">\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-64205\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-1.jpg\" alt=\"Positioning Introduction\" width=\"400\" height=\"278\" \/><\/td>\n<\/tr>\n<tr>\n<td width=\"128\">relative<\/p>\n<p>#div-1{ position:relative; top:20px; left:-40px; }<\/td>\n<td width=\"438\">\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-64206\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-2-1.jpg\" alt=\"Positioning Introduction 2\" width=\"400\" height=\"258\" \/><\/td>\n<\/tr>\n<tr>\n<td width=\"128\">absolute<\/p>\n<p>#div-1a { position:absolute; top:0; right:0; width:200px; }<\/td>\n<td width=\"438\">\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-64207\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-3-1.jpg\" alt=\"Positioning Introduction 3\" width=\"400\" height=\"331\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\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>The position property is used to assign with accuracy where in a web page an element to appear. An element may appear relative to a container element or to the browser window or can be layered on top of another. Its values are discussed as Value Description static Elements renders in order, as they appear&#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":[1826],"class_list":["post-74225","page","type-page","status-publish","hentry","category-css3","tag-positioning-introduction"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Positioning Introduction - 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\/positioning-introduction-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Positioning Introduction - Tutorial\" \/>\n<meta property=\"og:description\" content=\"The position property is used to assign with accuracy where in a web page an element to appear. An element may appear relative to a container element or to the browser window or can be layered on top of another. Its values are discussed as Value Description static Elements renders in order, as they appear...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-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\/Positioning-Introduction-1.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/\",\"name\":\"Positioning Introduction - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-1.jpg\",\"datePublished\":\"2020-01-17T06:18:46+00:00\",\"dateModified\":\"2024-04-12T08:53:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-1.jpg\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Positioning Introduction\"}]},{\"@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":"Positioning Introduction - 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\/positioning-introduction-2\/","og_locale":"en_US","og_type":"article","og_title":"Positioning Introduction - Tutorial","og_description":"The position property is used to assign with accuracy where in a web page an element to appear. An element may appear relative to a container element or to the browser window or can be layered on top of another. Its values are discussed as Value Description static Elements renders in order, as they appear...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-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\/Positioning-Introduction-1.jpg","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/","name":"Positioning Introduction - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-1.jpg","datePublished":"2020-01-17T06:18:46+00:00","dateModified":"2024-04-12T08:53:22+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-1.jpg","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Positioning-Introduction-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/positioning-introduction-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Positioning Introduction"}]},{"@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\/74225","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=74225"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74225\/revisions"}],"predecessor-version":[{"id":85688,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74225\/revisions\/85688"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}