CSS 最上層顯示是指在一個網頁中,元素的層級關系由 CSS 控制,可以通過定義 z-index 屬性來達到控制元素層疊順序的目的。當兩個元素重疊時, z-index 值較大的元素會覆蓋在 z-index 值較小的元素上方。下面是一個演示:
div { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; } div#box1 { background-color: red; z-index: 2; } div#box2 { background-color: green; z-index: 1; }
上述代碼中,我們定義了兩個 div,它們的寬高相同,位置重疊,但是 box1 的 z-index 值為 2,box2 的 z-index 值為 1。因此,box1 會覆蓋在 box2 上方,形成了一個紅色的正方形。
需要注意的是, z-index 只在有定位屬性的元素(如 relative、absolute、fixed)中有效。如果兩個元素均未定義定位屬性,那么它們的層疊順序只取決于它們在 HTML 中的排列順序。
總之,掌握好 CSS 的層疊順序是實現網頁布局的重要一環,可以幫助開發者在布局過程中更加高效、準確地控制元素的顯示效果。