最近在項目的過程中遇到了一個問題，menu-bar希望始終顯示在最上面，而在之后的元素都顯示在它之下，當時設置了 z-index 也沒有效果，不知道什么原因，因此找了一下css有關層疊方面的資料，解決了這個問題，這里記錄一下~

屏幕是一個二維平面，然而HTML元素卻是排列在三維坐標系中，x為水平位置，y為垂直位置，z為屏幕由內向外方向的位置，我們在看屏幕的時候是沿著z軸方向從外向內的；由此，元素在用戶視角就形成了層疊的關系，某個元素可能覆蓋了其他元素也可能被其他元素覆蓋；

那么這里有幾個重要的概念： 層疊上下文 (堆疊上下文, Stacking Context)、 層疊等級 (層疊水平, Stacking Level)、 層疊順序 (層疊次序, 堆疊順序, Stacking Order)、 z-index

聲明：

• 以下定位元素指的是  position:absolute|fixed|relative|sticky
• 以下非定位元素指的是  position:initial|static
• 關于層疊上下文還有一個類似的概念： 塊級格式化上下文 (BFC, Block Formatting Context)，可以參考一下 CSS 中重要的BFC，其中還介紹了一些文檔流的內容；
• 本文蠻長的，但是如果你有勇氣看完，那應該對層疊有關概念就基本掌握了 (～o￣ 主站蜘蛛池模板： 灵璧县| 南京市| 盐池县| 郎溪县| 龙游县| 汉中市| 湄潭县| 巴楚县| 长岭县| 宝应县| 永春县| 德化县| 大洼县| 永新县| 易门县| 望城县| 玉山县| 海兴县| 安远县| 龙泉市| 通渭县| 巨野县| 微博| 长沙县| 加查县| 五常市| 利川市| 高雄县| 延吉市| 临清市| 肥东县| 建德市| 拜城县| 河池市| 栖霞市| 福海县| 霍州市| 澄江县| 同心县| 万山特区| 民县|