CSS outline被其他元素遮挡，如何让按钮的outline显示在顶层？

给处于hover/focus等状态的按钮添加position: relative和z-index: 1即可解决outline被遮挡的问题，无需使用伪元素：

.grid {
  display: grid;
  margin: 1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  width: 12rem;
  place-items: stretch;
  aspect-ratio: 1;
} 

.tile:where(:hover, :focus, :focus-visible, :focus-within) {
  outline: 5px solid blue;
  position: relative;
  z-index: 1;
}

原理说明 #

• 默认情况下，所有网格子元素的堆叠层级相同，outline属于元素自身的视觉延伸，超出元素边界后会被相邻的同级元素遮挡。
• position: relative会为元素创建独立的堆叠上下文，配合z-index: 1可以让激活状态的按钮层级高于其他未激活的按钮，从而让outline完整显示在最上层。

完整示例代码：

<div class="grid">
  <button class="tile">1</button>
  <button class="tile">2</button>
  <button class="tile">3</button>
  <button class="tile">4</button>
</div>

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