CSS固定header场景下不使用相对/绝对定位如何调整price元素位置

问题根因 #

出现遮挡的核心原因是CSS层叠上下文规则：未手动设置z-index的position: fixed元素默认层叠等级为0，DOM顺序在它之后的定位元素（relative/absolute/sticky/fixed）如果也未设置z-index，会按渲染顺序覆盖在fixed元素上方。

方案1：不给price设置定位属性，实现右下角放置 #

不需要给.price加任何position相关属性，用Grid布局就可以实现「按钮文字居中、price标签贴右下角」的效果，修改代码如下：

1. 调整按钮的布局属性：

.card button {
  /* 保留原有属性，删除原有的align-items: center; */
  display: grid;
  place-items: center;
}

2. 调整price的布局属性，无需加定位：

.price {
  /* 保留原有属性，不添加任何position配置 */
  grid-area: 1/1/-1/-1;
  align-self: end;
  justify-self: end;
  margin: 8px; /* 可自行调整标签和按钮边缘的间距 */
}

这个方案完全通过原生布局实现位置调整，不会触发层叠等级提升导致的header遮挡问题。

方案2：保留所有元素的定位属性，彻底解决header遮挡 #

这个方案是更通用的常规实现，不需要删除任何元素的position配置，只需要调整header的层叠等级即可一劳永逸：

1. 给固定定位的header设置更高的层叠等级，确保它永远在页面最上层：

.header {
  /* 保留原有属性 */
  z-index: 999;
}

2. 补全原代码的定位逻辑bug：你代码里的.number角标设置了position: absolute，但父容器.card没有设置定位基准，会导致角标相对视口错位，给card补上相对定位即可（不会影响header层级）：

.card {
  /* 保留原有属性 */
  position: relative;
}

改完之后你可以自由给price、number等任何元素设置relative/absolute定位调整位置，所有内容都会默认显示在header下方，不会出现遮挡。

额外注意 #

你当前代码里把<div class="header">写在了<head>标签内，不符合HTML规范，head标签只能放元信息（title、meta、link、script等），可见的页面内容需要全部放到<body>标签内部，把header移到body最开头即可，避免部分浏览器出现渲染异常。

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