{"id":2981,"date":"2014-12-11T14:57:35","date_gmt":"2014-12-11T20:57:35","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=838"},"modified":"2014-12-11T14:57:35","modified_gmt":"2014-12-11T20:57:35","slug":"how-to-use-position-relative-and-position-absolute-correctly","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-use-position-relative-and-position-absolute-correctly\/","title":{"rendered":"How To Use Position Relative and Position Absolute Correctly"},"content":{"rendered":"

Using position in CSS is a big deal. It can be the difference between code that works OK in certain situations, and code that works beautifully every single time. <\/p>\n

One really useful aspect to understand is using position: relative in conjunction with position: absolute. <\/p>\n

So lets say I want to fix a div to the right of another div. You could accomplish this a number of different ways, but the most useful would be doing the following:
\n
\nHTML<\/p>\n

\n<div class=\"outside\"><div class=\"inside\">\n<\/pre>\n
CSS<\/p>\n
\n.ouside {\nposition: relative;\n}\n.inside {\nposition: absolute;\nright: 0;\ntop: 0;\n}\n<\/pre>\n
That would fix the .inside div to the right side of .outside.  So no matter what happens to the .outside div, the .inside div will always be to the right and to the top:<\/p>\n
\n
<\/div>\n<\/div>\n
So by setting any outside div as a position absolute, you can fix an inside div anywhere. <\/p>\n
Important note: This is generally NOT supported by HTML emails.<\/strong><\/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":"
Using position in CSS is a big deal.  It can be the difference between code that works OK in certain situations, and code that works beautifully every single time.  <\/p>\n
One really useful aspect to understand is using position: […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2981"}],"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=2981"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2981\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}