CSS是一種樣式表語言,它能夠讓我們把HTML文檔中的元素美化和排版,它支持選擇器,屬性和值。
CSS中盒子模型是很重要的一個(gè)概念,它指的是HTML元素在渲染時(shí)所占的空間,是由內(nèi)容,內(nèi)邊距,邊框和外邊距四部分組成。
.box { width: 100px; /* 寬度 */ height: 100px; /* 高度 */ padding: 10px; /* 內(nèi)邊距 */ border: 1px solid black; /* 邊框 */ margin: 10px; /* 外邊距 */ }
那么如何讓多個(gè)盒子進(jìn)行層疊呢?CSS提供了z-index屬性。
.box1 { z-index: 1; } .box2 { z-index: 2; /* 比box1高一層 */ }
z-index屬性值越高,元素層疊得越靠上,如果兩個(gè)元素z-index值相同,則后面的元素層疊的更上面。
需要注意的是,只有使用position屬性的元素才能使用z-index屬性進(jìn)行層疊。
.box { position: relative; /* 相對定位 */ } .box1 { z-index: 1; position: absolute; /* 絕對定位 */ } .box2 { z-index: 2; /* 比box1高一層 */ position: absolute; /* 絕對定位 */ }
以上代碼中,.box元素使用相對定位,其他兩個(gè)元素使用絕對定位,才能使用z-index屬性進(jìn)行層疊。
總結(jié):使用z-index屬性可以讓多個(gè)元素進(jìn)行層疊,z-index值越高則層疊得更靠上,需要使用position屬性才能進(jìn)行層疊。