[css] z-index test memo.

  所謂 z-index就是個靠爸的東西, 因為不管你的 z-index設定的多高, 跟別人比在一起只要你老爸(parent)的 z-index輸人家一節,你就很難翻身啦.XDD

  以下面案例來舉例:

Check out this Pen!

  我設定了幾個物件: bd, bd下的 draw; ft,  ft下的 img. 而 bd與 ft同一層(意味著兩著互相比較z-index).

  然後設定 bd: z-index為1, ft為2 ( ft比bd高); draw為3, img為-1.
  由此可知道最不成材的就是 img,可是!可是怎麼看他都是在最上層啊!(各位看官可以把img的top改為0,仍然會在ft的上層.

由此可知身為draw的你不管再怎樣努力,都比不過ft底下的img啊!

  而且物件生成的順序也會決定他的 z-index, 若我都設定 bd跟 ft為-1, 由於 ft較 bd後呈現, 所以 layer仍然比較高, 這樣一比較 img仍然比 draw來的高阿.

<div class="content">
    <div class="bd">
        <div class="draw"></div>        
    </div>
    <div class="ft">
        <img src="http://avekta.com/site2/wp-content/uploads/2011/10/ico_fb.png" />
    </div>
</div>Check out this Pen!

Check out this Pen!