{"id":4446,"date":"2023-01-04T15:59:17","date_gmt":"2023-01-04T15:59:17","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=4446"},"modified":"2023-01-04T16:15:15","modified_gmt":"2023-01-04T16:15:15","slug":"absolute-positioning","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/positioning\/absolute-positioning","title":{"rendered":"Absolute positioning"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>position: absolute;<\/code><\/pre>\n\n\n\n<p>Positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).<br>If there is no positioned ancestor, it uses the document body, and moves along with page scrolling.<br>Absolute positioned elements are removed from the normal flow, and can overlap elements.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example usage<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">The parent element<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>.MyClassNameParent {\n  width: 300px;\n  height: 300px;\n  position: relative;\n}<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">Child elements<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>.MyClassNameChild1 {\n  position:absolute;\n  top: 20px;\n  right: 0px;    \/*Pixels left from right edge*\/\n\n  width: 100px;\n  height: 20px;\n  border: 1px solid #F00;\n}\n\n.MyClassNameChild2 {\n  position:absolute;\n  bottom: 100px;    \/*Pixels up from bottom edge*\/\n  left: 30px;\n\n  width: 100px;\n  height: 20px;\n  border: 1px solid #F00;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).If there is no positioned ancestor, it uses the document body, and moves along with page scrolling.Absolute positioned elements are removed from the normal flow, and can overlap elements. Example usage The parent element Child elements<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[352],"tags":[],"class_list":["post-4446","post","type-post","status-publish","format-standard","hentry","category-positioning"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=4446"}],"version-history":[{"count":4,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4446\/revisions"}],"predecessor-version":[{"id":4453,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4446\/revisions\/4453"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=4446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=4446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=4446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}