z-index是CSS中用來控制重疊元素層級的屬性。它的工作原理可以總結為以下幾點:
z-index屬性只對定位元素(即position屬性值為relative、absolute或fixed)有效,對于靜態元素不起作用。
元素的z-index值越大,表示該元素在層級上越靠前,即越接近用戶。具有較大z-index值的元素會覆蓋具有較小z-index值的元素。
當元素重疊時,z-index屬性可以用于指定元素的層級關系。具有較高z-index值的元素將位于具有較低z-index值的元素之上。
如果兩個元素具有相同的z-index值,那么它們的層級關系取決于它們在HTML文檔中的順序,后面出現的元素將位于前面出現的元素之上。
如果元素沒有顯式定義z-index屬性,那么它們的z-index值默認為auto,這表示它們的層級關系取決于它們在HTML文檔中的順序。
除了整數值,z-index屬性還可以取負值,負值表示元素位于正常流之下的層級。負值越小,元素越低。
總之,z-index屬性通過設置元素的層級關系,可以控制元素的顯示順序和重疊效果。