{"id":15,"date":"2007-08-21T22:05:18","date_gmt":"2007-08-21T19:05:18","guid":{"rendered":"http:\/\/www.held.org.il\/blog\/?p=15"},"modified":"2012-05-21T02:37:54","modified_gmt":"2012-05-20T23:37:54","slug":"css-position-attribute","status":"publish","type":"post","link":"http:\/\/www.held.org.il\/blog\/2007\/08\/css-position-attribute\/","title":{"rendered":"CSS position attribute"},"content":{"rendered":"<p>I didn't fully understand it from w3schools description, so here's a simpler (IMO) explanation after digging the issue a little bit:<\/p>\n<ul>\n<li><span style=\"color: #559955;\"><strong>static <\/strong><\/span> <strong>(the default!)<\/strong>: The browser decides where to put the element, and it's <strong>not movable<\/strong> (i.e. one cannot change the position attributes (<em>top, left, bottom, right<\/em>) )<\/li>\n<li><span style=\"color: #559955;\"><strong>relative<\/strong><\/span>: Position attributes can be changed, relatively to the 'where-the-browser-decided' position (i.e. for having an element like the static above, but 5 pixels upper, one can put <em>top: -5px<\/em>)<\/li>\n<li><span style=\"color: #559955;\"><strong>absolute:<\/strong><\/span> One can specify a <strong>specific<\/strong> position inside the document, which should be measured from the beginning of the document. (i.e. <em>top: 100px; left: 500px<\/em>) will be on the <em>x=500, y=100<\/em> location from the document's start point (top-left in most cases).<br \/>\nI've noticed that IE6 sometimes measured the location relatively to the parent element in some cases, but it seems to be fixed in IE7.<\/li>\n<li><span style=\"color: #559955;\"><strong>fixed:<\/strong><\/span> Similar to absolute, only that the position is relative to the WINDOW and not the DOCUMENT, thus scrolling doesn't change the position. someone said it's <strong>like<\/strong> <strong>a watermark<\/strong>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I didn&#8217;t fully understand it from w3schools description, so here&#8217;s a simpler (IMO) explanation after digging the issue a little bit: static (the default!): The browser decides where to put the element, and it&#8217;s not movable (i.e. one cannot change the position attributes (top, left, bottom, right) ) relative: Position attributes can be changed, relatively [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[30,55,72,202],"_links":{"self":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts\/15"}],"collection":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":0,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}