HTML/CSS中outline描边渲染顺序及层级调整方法

这个现象是CSS标准规定的堆叠绘制顺序+outline的特殊绘制逻辑导致的，和z-index默认值无关：

• 代码里的父div设置了display: flex，会自动创建一个独立堆叠上下文。对于创建了堆叠上下文的元素，浏览器绘制顺序从底到顶为：先绘制元素自身的背景、边框，再按层级绘制内部所有子元素的全部内容（包括子元素的背景、边框、outline），最后才会绘制当前元素自身的outline。
• outline本身不占据文档流空间，也不会被元素的内容边界裁切，它的绘制时机完全绑定在所属元素的绘制流程节点上，不会因为是父元素的样式就自动沉在子元素内容下方。

父div的灰色outline绘制时机晚于子span的所有内容（包括span的红色outline），所以最终视觉上父元素的outline会盖在子元素outline上方。

两种常用无副作用方案：

• 方案1：提升子span的堆叠层级
  给子span设置相对定位+正z-index，让span成为独立的正层级堆叠上下文，其整体绘制层级会高于父元素outline的绘制层级，即可让span的红色outline盖在父div的灰色outline上方。
  修改后的span样式代码：

  #foreground-span {
      position: relative;
      z-index: 1;
      background-color: #fff;
      width: 100px;
      height: 25px;
      outline-style: solid;
      outline-width: 7px;
      outline-color: #f00;
  }
  

• 方案2：用box-shadow模拟父元素的outline
  如果不需要outline的特殊交互/布局特性，可以把父元素的outline替换为等值的外阴影实现轮廓效果。box-shadow的绘制时机在元素背景之后、子元素内容绘制之前，不会覆盖子元素的内容。
  修改后的父div样式代码：

  #background-div {
      display: flex;
      background-color: #555;
      width: 100px;
      height: 50px;
      /* 移除原outline，用外阴影模拟4px灰色轮廓 */
      box-shadow: 0 0 0 4px #999;
  }
  

内容的提问来源于stack exchange，提问作者Bill TheKid