如何仅在position未设置时为.card类应用position: relative？

要实现“仅当元素未设置position时，才给.card添加position: relative”的效果，有几种简洁的方案，核心思路是利用CSS的优先级或自定义属性让原有position设置优先生效：

方案1：使用:where()降低.card的优先级 #

:where()伪类会把选择器的优先级降为0，这样任何其他设置了position的样式（比如内联样式、其他类选择器）都会覆盖.card的relative设置：

:where(.card) {
  position: relative;
  /* 其他卡片样式 */
}

这样一来：

• 如果元素没有任何其他position设置，.card的relative会生效，满足::before伪元素的定位需求；
• 如果元素本身已经设置了absolute（或fixed/sticky），原有position会覆盖.card的relative，同时元素本身已是positioned容器，伪元素的绝对定位依然能正常工作。

方案2：使用CSS自定义属性（更灵活） #

给.card的position设置一个默认值，允许通过自定义属性覆盖：

.card {
  position: var(--card-position, relative);
  /* 其他卡片样式 */
}

当需要让元素保持absolute时，只需给元素设置自定义属性即可，比如：

• 内联样式：

<div class="card" style="--card-position: absolute;"></div>

• 或者在其他类中设置：

.absolute-card {
  --card-position: absolute;
  position: absolute;
}

这种方法适合需要主动控制position的场景，灵活性更高。

补充说明 #

卡片的::before伪元素需要父级是positioned元素（即值为relative/absolute/fixed/sticky），所以不管父元素是relative还是absolute，伪元素的绝对定位都能正常基于父元素计算，无需担心失效。

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