background: background-color background-image background-repeat background-attachment background-position
1.關于層疊順序
關于層疊順序這個概念,我覺得是必須出現(xiàn)多個元素搶占同一個布局位置的這一個前提,否則就不需要控制它們在z軸上的位置了。也就是說,z-index就是控制一個元素在z軸上的顯示順序。
2.明確一下什么叫做搶占同一個布局位置
問:正常流布局中的父子元素有搶占同一個布局位置嗎?要知道他們在xy平面上有重疊的地方,盡管如此,但是在這里我們并不把這稱為有搶占同一個布局位置。那么什么時候出現(xiàn)的位置重疊才叫做搶占了同一個布局位置呢?我的理解(不知道正確與否)是這樣的:在兩個元素在DOM結構上不是父子之間關系(包括祖先與子孫一級的關系)的前提下,如果某個元素被某些css屬性設置使其脫離了文檔流,并且之后移位到了某個地方和某個元素在平面中有重合情況的話,那么就叫做搶占了同一個布局位置。
3怎么讓多個元素競爭同一個布局位置
很多種方法,比如說使用非static,relative的定位,讓多個元素去競爭同一個位置。它們都是從標準流中脫離出來了。因此在布局上會出現(xiàn)這種復雜的情況。那么問題來了,使用浮動元素來設置多個元素競爭同一個布局位置是否可行呢?答案是不行的,為什么呢?因為雖然浮動元素脫離了文檔流,但是它仍然會影響后續(xù)布局,我們都知道浮動元素會使得元素呈現(xiàn)出塊元素的模式,但是依我愚見我覺得是float是會使得元素變?yōu)閕nline-block。還有一個問題:為什么relative也不行呢?因為relative定位會使得元素保留原來的位置,也就是說如果自己原本屬于block的話,那么設置為relative的話仍舊是block,若屬于inline的話,那么設置為relative的話仍舊為inline的。
關于這些元素的包含塊的問題,以前的筆記也提到過,這里就再寫一下吧。爛筆頭還是具有一點效應的。
relative||static:距離自己最近塊元素的元素框(參見css權威指南p308,這個框我理解為border-box)、表單元格或者距離自己最近的祖先級行內(nèi)元素的content-box。
absolute:距離自己最近的祖先級position非static的元素:
- 1.若為內(nèi)聯(lián)元素,那么則是這個內(nèi)聯(lián)元素的content-box
- 2.若為塊元素,那么則是這個塊元素的padding-box
float:距離自己最近的塊級祖先元素。