Ionic中ion-toolbar及ion-content内ion-card的z-index不生效问题

核心原因 #

• z-index生效的前置要求是元素必须设置非static的定位属性（relative/absolute/fixed/sticky），原有代码未给对应元素设置定位，z-index设置无效。
• Ionic内置组件默认自带影子DOM样式、独立堆叠上下文，且提供了专属CSS变量控制层级，直接写原生z-index容易被框架内置样式覆盖。
• 原有CSS存在嵌套语法错误：原生CSS不支持选择器嵌套，ion-card内部直接写ion-img的样式、ion-toolbar内部直接写.bordered的样式在非预处理器环境下不会生效。

修复步骤 #

1. 给需要调整层级的ion-toolbar、ion-card添加position: relative，满足z-index生效的基础条件
2. 优先使用Ionic内置的--z-index变量控制组件层级，避免被框架默认样式覆盖
3. 修正CSS嵌套语法错误，拆分嵌套的选择器为独立规则
4. 给ion-content设置基础层级，保证和工具栏的堆叠顺序符合预期

修正后可直接使用的代码 #

ion-toolbar {
  --background: #e1b12c;
  --z-index: 100; /* Ionic内置工具栏层级变量，优先级高于原生z-index */
  color: #FFFFFF;
  padding-bottom: 200px;
  border-radius: 0 0 20% 20%;
  position: relative;
}
ion-toolbar .bordered {
  --border-radius: 10px;
}

ion-col {
  padding: 0;
}

ion-content {
  --background: #f6f6f6;
  position: relative;
  z-index: 1;
}

ion-card {
  margin-top: -180px;
  position: relative; /* 必加，否则z-index不生效 */
  z-index: 10;
  padding: 6px;
  box-shadow: none;
  box-shadow: 0px 3px 45px 0px rgba(0, 0, 0, 0.16);
  border-radius: 40px;
  overflow: visible;
}

ion-card ion-img {
  width: 240px;
  margin: -50px auto auto -30px;
}

排错提示：如果调整后仍存在层级异常，检查对应元素的父级是否设置了transform属性、opacity值小于1、或者添加了filter效果，这类属性会让元素生成新的堆叠上下文，子元素的z-index只会在当前父容器范围内生效。

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