{"id":53,"date":"2022-09-20T10:49:40","date_gmt":"2022-09-20T10:49:40","guid":{"rendered":"https:\/\/devopssupport.in\/blog\/?p=53"},"modified":"2022-09-20T10:49:40","modified_gmt":"2022-09-20T10:49:40","slug":"css-positions-static-absolute-relative-fixed-and-sticky","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/css-positions-static-absolute-relative-fixed-and-sticky\/","title":{"rendered":"CSS Positions Static, absolute, relative, fixed and sticky"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>There are five types of position property :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>static<\/li><li>relative<\/li><li>absolute<\/li><li>fixed<\/li><li>sticky<\/li><\/ul>\n\n\n\n<p><strong>static<\/strong>: Static positioned elements are not affected by any attribute like top, bottom, left, and right. It is the default position of HTML elements.<\/p>\n\n\n\n<p><strong>relative<\/strong>: It is used when we need to position an HTML element relative to its normal position. We can set the top, right, bottom, and left properties that will cause the element to adjust away from the normal position.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"405\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image.png\" alt=\"\" class=\"wp-image-54\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image.png 844w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-300x144.png 300w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-768x369.png 768w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"220\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-1.png\" alt=\"\" class=\"wp-image-55\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-1.png 667w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-1-300x99.png 300w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/figure>\n\n\n\n<p><strong>absolute<\/strong>: An element with the absolute position will move according to the position of its parent element. In the absence of any parent element, the HTML element will be placed relative to the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"896\" height=\"488\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-2.png\" alt=\"\" class=\"wp-image-56\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-2.png 896w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-2-300x163.png 300w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-2-768x418.png 768w\" sizes=\"auto, (max-width: 896px) 100vw, 896px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"238\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-3.png\" alt=\"\" class=\"wp-image-57\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-3.png 547w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-3-300x131.png 300w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><\/figure>\n\n\n\n<p><strong>fixed<\/strong>: An element with\u00a0position:fixed;\u00a0will remain stuck to a specific position even after the page is scrolled. <\/p>\n\n\n\n<p>This position property is used when we want to keep an HTML element at a fixed spot no matter where on the page is scrolled.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"711\" height=\"368\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-4.png\" alt=\"\" class=\"wp-image-58\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-4.png 711w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-4-300x155.png 300w\" sizes=\"auto, (max-width: 711px) 100vw, 711px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"164\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-5.png\" alt=\"\" class=\"wp-image-59\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-5.png 902w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-5-300x55.png 300w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-5-768x140.png 768w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<p><strong>sticky<\/strong>: Sticky is similar to fixed position, A sticky element toggles between\u00a0<code>relative<\/code>\u00a0and\u00a0<code>fixed<\/code>, depending on the scroll position<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"883\" height=\"155\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-8.png\" alt=\"\" class=\"wp-image-62\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-8.png 883w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-8-300x53.png 300w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-8-768x135.png 768w\" sizes=\"auto, (max-width: 883px) 100vw, 883px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"173\" src=\"https:\/\/devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-7.png\" alt=\"\" class=\"wp-image-61\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-7.png 902w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-7-300x58.png 300w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/09\/image-7-768x147.png 768w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>There are five types of position property : static relative absolute fixed sticky static: Static positioned elements are not affected by any attribute like top, bottom, left,&#8230; <\/p>\n","protected":false},"author":2,"featured_media":64,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[27,25,29,24,28,26,30],"class_list":["post-53","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-absolute","tag-css","tag-fixed","tag-positions","tag-relative","tag-static","tag-sticky"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions\/63"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media\/64"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}