content 默认绘制在 background 和 border 之上，因渲染顺序中 background/border 属于“block background and borders”阶段，content 属于后续阶段；z-index 对 background/border 无效，仅作用于定位元素。
background 和 border 怎么被 content 覆盖？
不是 content 主动“覆盖”，而是盒模型里 background 和 border 天然绘制在 content 区域的底层——content 的内容（文字、子元素）默认绘制在它们之上，这是浏览器渲染层叠的默认行为。
常见错误现象：background-color 看不见、border 被遮挡、伪元素 ::before 挡住了边框。本质是误以为 background/border 是“最上层”，其实它们只是“盒子皮肤”，内容才是贴着皮肤长出来的。
-
background绘制范围：padding box（含 padding，不含 border 和 margin） -
border绘制在 padding box 外侧，紧贴其边缘 - content（文字、子元素）默认绘制在 border box 内部，z-index 为 auto，自然压在 background 和 border 之上
z-index 对 background 和 border 有效吗？
完全无效。z-index 只作用于定位元素（position 为 relative、absolute、fixed 或 sticky），而 background 和 border 是盒模型固有绘制阶段的一部分，不参与 stacking context 排序。
使用场景：想让某个装饰性边框浮在文字上面？别调 z-index，那没用。得换思路——比如用伪元素模拟边框，并给它加 position: relative 和 z-index。
立即学习“前端免费学习笔记（深入）”；
- 直接给普通块级元素设
z-index（没设position）会被忽略 -
background-image即使是 PNG 透明图，也仍属于 background 层，无法通过 z-index 提升 - 真正能“盖住 border”的只有：子元素、伪元素、或父容器的
overflow: hidden导致裁剪
box-sizing: border-box 会影响背景和边框的绘制位置吗？
不影响绘制顺序，但影响 background 的起始位置和可渲染区域大小。
参数差异：box-sizing: content-box（默认）下，width/height 只算 content 区；border-box 下，width/height 包含 content + padding + border。这意味着：
-
background-color始终铺满 padding box —— 所以border-box下，相同 width 值时，background 实际显示区域更小（因为 padding 和 border 挤占了空间） -
border的视觉厚度不变，但它在盒子里“占位”方式变了：在border-box中，border 是从 width/height 里扣出来的，不是额外加的 - 性能影响极小，但兼容性要注意：IE8+ 支持，但老式 reset.css 有时会漏掉全局设置，导致表单控件（如
input）在不同浏览器中宽高表现不一致
为什么 overflow: hidden 有时会切掉 border？
因为 overflow: hidden 裁剪的是 border box 边界，而 border 是绘制在 border box 的边缘上的——如果 border 本身有圆角（border-radius）或阴影（box-shadow），裁剪可能意外切到 border 的视觉部分。
容易踩的坑：给一个带 border-radius: 8px 和 overflow: hidden 的容器内部放图片，结果圆角 border 看起来“断了一截”。这不是 bug，是渲染顺序决定的：border 先画，然后 overflow 按 border box 矩形裁剪，圆角外的像素就被剪掉了。
- 解决办法：把
border-radius加在父容器上，同时确保子元素也继承或适配圆角（比如图片设border-radius: inherit） -
box-shadow不受overflow: hidden影响，它画在 border box 外，所以不会被裁 - 调试技巧：临时加
outline: 2px dashed red，outline 不参与盒模型计算，也不被 overflow 裁，能帮你确认 border box 实际边界在哪里
