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。

Advertisements

javascript good blog

留下评论

http://nefariousdesigns.co.uk/archive/2006/05/object-oriented-javascript/
http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

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);