在CSS中,可以通過層疊和定位的方式將多個元素重疊在一起形成圖層。而圖層中最上層的元素可以通過在CSS中設置其 z-index 屬性值最大來實現。
z-index 屬性用于控制元素的層疊順序,取值范圍為整數和 auto,數值越大,層疊順序越高。
/* 通過設置 z-index 為9999,將元素置于最上層 */ .top-layer { position: absolute; z-index: 9999; /* 其他樣式 */ }
需要注意的是,z-index 屬性只有在元素定位(position 屬性值為 relative、absolute 或 fixed)的情況下才生效。
在實際應用中,我們可以利用 z-index 屬性來實現一些效果,例如在彈出框中,將遮罩層置于最上層:
/* 遮罩層樣式 */ .mask-layer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } /* 彈出框樣式 */ .modal-layer { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 10000; /* 其他樣式 */ }
通過設置遮罩層的 z-index 屬性比彈出框的 z-index 屬性低,可以確保彈出框總是顯示在遮罩層之上。