在网页交互里，浮层效果通常指某个元素脱离常规文档流，在视觉上覆盖在其他内容之上，并带有一定立体感。纯CSS就能完成这件事，关键是两个属性：box-shadow负责画出浮起后的投影，z-index负责控制谁压在谁上面。只要搞清它们的生效条件，不用写一行JS也可以做出稳定的浮层。
一、box-shadow的基本用法与浮层观感
box-shadow用于在元素框外侧或内侧绘制阴影。实现浮层观感时，我们一般用外部阴影，让它看起来像被光从上方打亮、悬浮在背景之上。最基本的语法是水平偏移、垂直偏移、模糊半径、扩散半径和颜色。
下面这段样式给一个卡片加了向右下偏移且带模糊的阴影，视觉上立刻有了浮起感：
.card {
width: 240px;
padding: 16px;
background: #ffffff;
border-radius: 8px;
/* 水平0 垂直8px 模糊24px 扩散0 半透明黑 */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
阴影的颜色透明度非常关键。如果直接用纯黑，浮层会显得脏；用rgba降低透明度，更接近真实光照。另外，垂直偏移为正表示阴影在下方，符合常见光源在顶部的习惯，用户会本能认为元素浮起来了。
box-shadow还支持多重阴影，用逗号分隔即可。比如同时加一层细描边阴影和一层大模糊阴影，能做出更精致的悬浮卡片：
.float-panel {
box-shadow:
0 1px 2px rgba(0,0,0,0.08),
0 12px 32px rgba(0,0,0,0.18);
}
二、z-index生效的前提与层叠规则
很多人写浮层时给元素加z-index却没效果，原因是z-index只对定位元素生效。也就是说，元素的position必须是relative、absolute、fixed或sticky之一，static定位下z-index会被浏览器忽略。
z-index的数值代表层叠顺序，数值大的覆盖数值小的。但层叠不是全页面比大小，而是在同一个层叠上下文里比较。如果父容器自己创建了层叠上下文（例如设置了transform、opacity小于1或flex子项等），那么子元素的z-index只在这个容器内排高低，出了容器就受父容器整体层级限制。
.overlay {
position: fixed; /* 必须定位 */
top: 20%;
left: 50%;
transform: translateX(-50%);
z-index: 1000; /* 在所属上下文内高层级 */
background: #fff;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
上面的overlay用fixed定位并设了z-index，同时用box-shadow增加浮起感。注意transform虽然方便居中，但会让该元素创建新的层叠上下文，不过因为它本身已是fixed浮层，通常不会被父级意外压住。
如果页面里有多个浮层模块，建议用变量统一管理层级，例如弹窗用1000、提示用1100、加载遮罩用1200，避免随手写9999造成后期混乱。
三、组合实现完整浮层组件
把前面两点合起来，就能写一个通用的浮层面板。结构上一个容器做遮罩或半透明背景，内部一个内容块做真正浮起的卡片。
<div class="mask">
<div class="dialog">
<p>这是一个纯CSS浮层对话框</p>
</div>
</div>
对应样式如下，遮罩用fixed铺满并给中等z-index，对话框在遮罩内再提升一层，并且利用box-shadow表现浮起：
.mask {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
position: relative;
z-index: 1; /* 在mask上下文内高于遮罩背景 */
background: #fff;
padding: 24px;
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
这里dialog的z-index设为1是因为它在mask创建的层叠上下文里，只需比遮罩背景高即可；而mask的900控制它和页面其他模块的上下关系。这种写法层级清晰，不会影响外部布局。
若想点击遮罩关闭，纯CSS可用label加checkbox hack实现，但那已超出浮层绘制本身。就视觉与覆盖控制而言，box-shadow加z-index已经足够。
四、常见误区与排查思路
第一个误区是忘记position。看到浮层被挡，先检查Computed样式里position是不是static。第二个误区是在父级写了opacity:0.9或transform，导致子浮层被锁在父上下文内，即使z-index再大也超不出父级范围。
第三个误区是阴影过重。box-shadow模糊半径过大、颜色过深，会让浮层像贴了黑边，反而显廉价。一般模糊取元素尺寸的10%到20%，透明度0.15到0.25之间较自然。
/* 不推荐：阴影太硬太重 */
.bad {
box-shadow: 0 0 60px #000;
}
/* 推荐：轻量柔和 */
.good {
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
排查时可用浏览器开发者工具查看元素的层叠上下文树，确认浮层所属上下文以及父级是否意外建了上下文。理清这条链路，z-index不生效的问题大多能迅速定位。
总体来说，box-shadow解决“看起来浮起来”，z-index解决“确实压在别的东西上面”。两者各司其职，配合定位属性，就能用极少代码实现靠谱的浮层效果。
css_box-shadowz-index浮层效果修改时间：2026-08-06 00:51:36