視頻中inline-block與block元素的層疊順序如何理解
inline-block與block元素都是普通元素，沒有定位也沒有其他CSS3屬性。于是它們都屬于html這個(gè)天然的根層疊上下文元素中。那么它們的層疊水平是遵循7階層疊順序的。文中又說(shuō)了inline-block和block元素的層疊順序是同階的，那么應(yīng)該遵循后來(lái)居上原則。背景色應(yīng)該按照后來(lái)居上原則從而block元素的背景色應(yīng)該在inline-block元素之上才對(duì)。實(shí)際效果為什么不是這樣呢？
問(wèn)題就是如何理解背景色是層疊順序，而不是后來(lái)居上的準(zhǔn)則呢？如果按照層疊順序，又是如何得出第一個(gè)元素的背景色能覆蓋第二個(gè)元素的背景色呢？
根據(jù)我在chrome瀏覽器中的測(cè)試，我將這兩個(gè)元素的順序倒過(guò)來(lái)，也就是先有block元素，再有inline-block元素。那么會(huì)發(fā)現(xiàn)inline-block元素的背景色覆蓋了block元素的背景色。這和前面的案例中效果一致。那么應(yīng)該說(shuō)inline-block元素的層疊順序應(yīng)該高于block元素的層疊順序。從而按照層疊順序出現(xiàn)inline-block元素的背景色覆蓋了block元素的背景色。
哪有同學(xué)能幫忙解釋一下嗎。這里有些不明白。
2016-12-01
我的理解是：
背景的層疊水平是遵循7階層疊順序的（inline-block>block）；
為何文字遵循后來(lái)居上原則？根據(jù)老師的意思，上面的文字是inline-block（被.inline-block設(shè)置），下面的文字是display:inline;（文字本身的屬性），而inline-block和inline是平級(jí)的，所以遵循后來(lái)居上原則。我認(rèn)為具體文字的display屬性是什么要看到html代碼才能知道吧，看具體是被什么標(biāo)簽包裹，這里看不到所以根據(jù)老師的表達(dá)猜測(cè)是這樣。
2016-07-03
代碼中沒有定位和z-index屬性干擾的話，inline-block樣式和block樣式是同級(jí)的，應(yīng)該遵循后來(lái)居上原則，而在父級(jí)相同，（如文字它屬于inline與inline-block同級(jí)故遵守），子級(jí)inline-block>block,即inline-block元素的層疊順序應(yīng)該高于block元素的層疊順序。
2016-04-17
后來(lái)居上原則好像要有定位吧，老師代碼中沒有定位呀。按照7階層疊水平來(lái)看，block比inline、inline-block的層疊順序低。