z-index 只对 position 值非 static 的元素生效（fixed / absolute / relative / sticky）。默认 auto，表现为按 DOM 顺序后来居上；赋整数后，同一「层叠上下文」内大数值盖住小数值。
真正的难点不在数值大小，而在层叠上下文（stacking context）：一个元素只要满足某些条件（position+z-index、opacity<1、transform、filter、will-change 等）就会创建一个新的层叠上下文，其内部子元素的 z-index 再大也逃不出这个容器——这是「弹窗被页脚盖住」类 bug 的根源。
<style> .box { position: relative; width: 120px; height: 60px; color:#fff; } .a { background: #e78a3e; z-index: 1; } .b { background: #4a9eff; top: 30px; left: 40px; z-index: 2; } /* 盖在橙盒上 */ .wrap { opacity: .99; } /* 意外创建层叠上下文：内部 z-index 被封印 */ .c { background: #f778ba; top: 60px; left: 80px; z-index: 999; } </style> <div class="box a">z-index:1</div> <div class="box b">z-index:2</div> <div class="wrap"><div class="box c">z-index:999 但被 opacity 封印 → 并不在最上</div></div>