背景色怎么把前面的標(biāo)簽覆蓋了?
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="UTF-8">
? ? <title>Padding testing</title>
? ? <style type="text/css">
? ? ? a{
? ? ? ? width:100px;
? ? ? ? line-height:30px;
? ? ? ? background: red;
padding:10px;
? ? ? }
? ? </style>
? </head>
? <body>
? <p>nsihi</p>
? ? <a >woshi</a>
<p>nsihi</p>
? </body>
</html>
隨著padding值的不斷增大,a標(biāo)簽的背景色會將前一個p標(biāo)簽覆蓋,而后一個p標(biāo)簽卻依然顯示,這是為什么
2016-08-24
你按絕對定位元素的思路去理解,如果位置重疊且前后元素層級相同,那么后面的元素默認(rèn)會覆蓋在前面元素之上。
雖然,這里并未對三個元素進行絕對定位,但是默認(rèn)的也是有z-index屬性的,只不過是auto。三個元素均為auto,那么自然就會后者覆蓋前者了。詳細(xì)的可以參考下老師的z-index的相關(guān)課程,里面對層疊順序進行說明。
????????7階層疊水平(stacking level)從低到高依次如下:
???????? ????層疊上下文(background/border)
???????? ????負(fù)z-index
???????? ????block塊狀水平盒子
???????? ????float浮動盒子
???????? ????inline/inline-block水平盒子
???????? ????z-index:auto或看成z-index:0
???????? ????正z-index