在CSS中,讓元素沉底需要使用z-index
屬性,該屬性表示元素的堆疊層次,數(shù)值越大表示越靠上層。
設置一個元素的z-index
值為負數(shù)時,該元素就會被置于其他元素下層,相當于讓元素沉底。以下是一個示例:
.box1{ position: absolute; left: 50px; top: 50px; width: 200px; height: 200px; background-color: red; z-index: 1; } .box2{ position: absolute; left: 100px; top: 100px; width: 200px; height: 200px; background-color: blue; z-index: -1; }
在上面的代碼中,兩個div
元素的位置和大小相同,但是box2
的z-index
值為負數(shù),所以它會被置于box1
下面。如果將box2
的z-index
值改為正數(shù),則box2
會被置于更上層。
需要注意的是,z-index
屬性只對定位(position)屬性值不為static的元素起作用,所以在使用z-index
屬性時需要將元素的position屬性設置為relative、absolute或fixed。