CSS position解析

CSS的定位属性可以有四种值

static

表示会根据页面的默认流式布局来设定元素的位置，这也是在默认情况下被选用的值；

fix

表示元素的位置相对于整个window全局对象，那么，当拖动浏览器滚动条时，该元素的位置仍然不会变；

注意：在IE7，IE8中使用标签!DOCTYPE指定文档类型后，该值才有意义；另外，由于使用fix的元素会被从正常的流式布局中移除，因此，它不会影响其他元素在正常布局中的位置；

relative

是相对于该元素在正常布局中本应该所在位置而言的；为元素预留的空间在正常布局中仍然被保留；

absolute

位置相对于第一个满足条件其poistion不是static的父节点；如果这样的节点不存在，就采用；

absolute也会让元素被移出正常的流式布局中；

position：absolute不被正常的流式布局所影响；同样，它也不影响正常的流式布局。它们的父容器只能是如下两种：
1. 最近的定位设置不等于static的祖先；
2. 全局的window或视口；
position：fix跟absolute的表现基本相同，只不过它的父容器只能是全局的window。fix的定位方式非常适合于那些总是可见的区域。
可惜的是，IE6并不识别这个属性值。更恐怖的是，IE6会把用正常的流式布局规则来处理之。
浏览器会为每个显示的网页保持一个栈式的上下文信息，所有显示的元素会按照它们在代码中出现的次序依次被压入栈。当然，
z-index属性可以打破这个默认的规则。如果z-index被应用于position：absolute的元素，浏览器会生成一个单独的栈式上下文。
任何positioning属性等于absolute或relative的子元素都被加入这个新生成的栈式上下文，而不是网页的栈式上下文；否则，其子元素
仍被压入新生成的栈式上下文，但是其定位信息将会被忽略，即采用static属性值，位置使用auto，z-index也使用auto。

javascript good blog

http://nefariousdesigns.co.uk/archive/2006/05/object-oriented-javascript/

Understanding JavaScript’s this keyword

JavaScript的六种境界

http://dean.edwards.name/weblog/2006/06/levels/
1.

alert("Hello World");

2.

var WORLD = "World";
function hello(who) {
  alert("Hello " + who);
};
hello(WORLD);

3.

<button onclick="hello(WORLD)">Say Hello</button>

4.

<button id="hello">Say Hello</button>
var button = document.all.hello;
button.onclick = function() {
  hello(WORLD);
};

5.

var button = document.getElementById("hello");
button.addEventListener("click", function(event) {
  hello(WORLD);
}, false);

6.

var Hello = new Binding({
  greet: function(who) {
    alert("Hello " + who);
  },

  onclick: function() {
    this.greet(Hello.WORLD)
  }
}, {
  WORLD: "World"
});
document.bind("#hello", Hello);