[CSS]Z-index學習紀錄(與opacity的神奇關係)

  • 2488
  • 0
  • CSS
  • 2013-08-20

摘要:[CSS]Z-index學習紀錄

z-index是CSS定義中的一個屬性,用來做出推疊呈現的概念,當我們把網頁上呈現的每一個物件都一個個放在同區域且互相分出層次的推放時(好比一張張推在那邊的廣告DM)總會有N張呈現在最上面(最容易被看到)跟最下面(最不容易被看到)

簡單來講,我們可以透過z-index這個屬性來控制推在一起HTML標籤呈現的順序。

以下是一個簡單的範例呈現推在一起的效果

Check out this Pen!
上面第一個方塊是正常呈現的樣子(依照tag順序出來),第二個方塊可以看到我們透過z-index指定順序後縱使tag順序是倒過來的也可以讓她呈現與第一個相同的效果
 
簡單來講網頁呈現時每個tag預設都會按照他在DOM的順序依序出現(越後面的會越晚出現,如果透過設定絕對位置的方式去覆蓋反而會讓越後面的tag在越上方),以上是成立在各項元素都是沒有特別設定z-index的情況(也就是大家都為一樣的值)
 
當我們加上z-index之後會呈現會根據z-index值從大->小呈現,所以越小的會放在越下面(就被遮住啦!!)
 
如果是正值就是越大越上面,但如果給的是負值,則代表會在body之下
 
以上當然是一個簡單的應用瞜
 
而今天剛好看到一個很有趣的應用,告訴我們應該正確了解z-index與如何使用,想要挑戰的人可以試試看 ( 原文在此  http://philipwalton.com/articles/what-no-one-told-you-about-z-index/)
 
原來長這樣
Check out this Pen!
 

Here's the challenge: try to see if you can make the red <span> element stack behind the blue and green <span> elements without breaking any of the following rules:

  • Do not alter the HTML markup in any way.
  • Do not add/change the z-index property of any element.
  • Do not add/change the position property of any element.

有興趣的可以動手挑戰一下後到上面的原網址去看一下答案瞜~~!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(這邊分遠一點,避免洩漏答案)

這裡很特別的是透過opacity竟然也達到了呈現順序的修改

div:first-child {
  opacity: .99;
}

上面這一行很簡單的指定了第一個div tag的opacity低於其他兩個(預設為1)

導致她呈現上被移到最後一層,這邊解說就麻煩回原網址看了,節錄重點如下

 

Stacking Order Within the Same Stacking Context

Here are the basic rules to determine stacking order within a single stacking context (from back to front):

  1. The stacking context's root element
  2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
  3. Non-positioned elements (ordered by appearance in the HTML)
  4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
  5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

Note: positioned elements with negative z-indexes are ordered first within a stacking context, which means they appear behind all other elements. Because of this, it becomes possible for an element to appear behind its own parent, which is normally not possible. This will only work if the element's parent is in the same stacking context and is not the root element of that stacking context. A great example of this is Nicolas Gallagher's CSS drop-shadows without images.

Global Stacking Order

With a firm understanding of how/when new stacking contexts are formed as well as a grasp of the stacking order within a stacking context, figuring out where a particular element will appear in the global stacking order isn't so bad.

The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you're setting a z-index of a billion on an element and it's not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn't going to do you any good.

如果對於z-index預設值有興趣的可以把它alert出來看看搂(上面第一個範例js註解取消即可看到)


如果覺得文章還不錯麻煩請在文章最上面給予推薦,你的支持是小弟繼續努力產出的動力!