{"id":1576,"date":"2012-07-31T21:56:18","date_gmt":"2012-07-31T21:56:18","guid":{"rendered":"http:\/\/cssreset.com\/?p=1576"},"modified":"2012-07-31T21:56:18","modified_gmt":"2012-07-31T21:56:18","slug":"understanding-css-relative-and-absolute-positioning-explained","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/understanding-css-relative-and-absolute-positioning-explained\/","title":{"rendered":"Understanding CSS: Relative and Absolute Positioning Explained"},"content":{"rendered":"

This is a brilliantly delivered CSS video tutorial! It breaks down the difference between absolute and relative positioning in a way that really makes sense for anyone getting started with CSS.<\/p>\n

Truly comprehending how to use the position: relative;<\/code> and position: absolute;<\/code> positioning declarations is necessary to have complete control over styling your documents through CSS. This is something that can be applied to just about any part of a document, which provides a high level of customization options.<\/p>\n

When working with position: relative;<\/code> the way the object in question is positioned is indeed relative to page margins of your document or relevant container. So for example, of you had a header that you wanted to be positioned in the upper left hand corner of the screen, then the code may look something like this.<\/p>\n

h1 {\r\n    position: relative;\r\n    top: 5px;\r\n    right: 5px;\r\n}<\/pre>\n
Now compare that to position: absolute;<\/code> where elements are positioned in relation to the browser window or parent element. So while relative positioning does not affect any other elements other than what is specifically targeted, absolute positioning can result in overlapping elements because objects are being placed in specific locations. If you wanted to position an image in the lower right corner of the screen, for instance, your code may look something like this.<\/p>\n
img {\r\n    position: absolute;\r\n    bottom: 0px;\r\n    right: 0px;\r\n}<\/pre>\n
There are more ways to position things using CSS, but with these two basics fully understood you can accomplish a lot. If this simple CSS tutorial was helpful to you, you will also enjoy this post on the ‘cascading’ behavior of Cascading Style Sheets. Thanks for stopping by!<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
This is a brilliantly delivered CSS video tutorial! It breaks down the difference between absolute and relative positioning in a way that really makes sense for anyone getting started with CSS.<\/p>\n
Share and Enjoy !0Shares0<\/p>\n
0<\/p>\n
 […]<\/p>\n
Watch Video<\/a><\/p>\n","protected":false},"author":18,"featured_media":1577,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,13],"tags":[109,46,79,105,120,118,102,108],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1576"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1576"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1576\/revisions"}],"predecessor-version":[{"id":1579,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1576\/revisions\/1579"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1577"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}