<li>的下邊框為什么可以覆蓋<div>的上邊框?而不是相反?
#tabs ul li.on
? ? ?{border-top:2px solid red;border-bottom:2px solid #fff;}
? ? ?#tabs div
? ? ?{height:120px;border:1px solid blue;border-top:2px solid red;padding:5px;}
#tabs ul li.on
? ? ?{border-top:2px solid red;border-bottom:2px solid #fff;}
? ? ?#tabs div
? ? ?{height:120px;border:1px solid blue;border-top:2px solid red;padding:5px;}
2018-06-05
舉報
2018-06-15
經(jīng)過我半小時的測試: 如果你把li設(shè)置成了display: inline-block或者干脆就是inline的話,就是li的下邊框覆蓋div的上邊框。這大概可以理解成文字等行內(nèi)元素默認(rèn)z-index就比塊元素div等高(當(dāng)然因為大家都沒有position事實上不是z-index的差別,而是某種設(shè)定。畢竟常規(guī)來說讓一個div覆蓋掉文字是不大常見的。)事實上經(jīng)過測試,inline = inline-block > block。而如果是兩個優(yōu)先級相同的(如兩個block,一個inline和一個inline-block),后面元素覆蓋前面元素(這和有position情況下z-index一樣的情況相同)。所以如果你li還是block,那么就是div的上邊框覆蓋li的下邊框啦。
當(dāng)然,最好還是設(shè)個position然后定個z-index。這樣子誰在上誰在下清清楚楚。