Ionic框架中ion-card无法显示在ion-header上方的问题求助

我明白你已经折腾两天了，这种布局问题确实让人头疼。咱们来一步步解决它：

问题根源 #

你的ion-card放在ion-content内部，而Ionic默认的层级（z-index）设置里，ion-header的z-index是100，ion-content的z-index是1。所以哪怕你给card设置了z-index:10，它所在的ion-content整体层级低于header，自然会被挡住。另外，ion-content默认可能存在裁剪（overflow）的设置，也会影响负margin元素的正常显示。

修复方案 #

方法一：调整层级与定位（推荐） #

把ion-card从ion-content中移出，放到ion-header之后、ion-content之前，然后通过绝对定位和z-index来控制它的位置，这样能更稳定地实现效果：

修改后的HTML：

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <ion-title> Age Calculator </ion-title>
  </ion-toolbar>
</ion-header>
<!-- 将card移到ion-content外部 -->
<ion-card class="date">
  <ion-row>
    <ion-col size="12">Today Date</ion-col>
    <ion-col size="12">
      <ion-item lines="none">
        <ion-icon name="calendar-outline" slot="start"></ion-icon>
        <ion-label>
          <ion-datetime placeholder="23-07-2020" [(ngModel)]="currentDate" display-format="DD-MM-YYYY"></ion-datetime>
        </ion-label>
        <ion-icon name="chevron-forward" slot="end"></ion-icon>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-card>
<ion-content [fullscreen]="true" padding>
  <div id="container">
    <!-- 原card位置留空，避免内容重叠 -->
  </div>
</ion-content>

修改后的CSS：

ion-toolbar{ 
  --background:#aac9ff; 
  color: #FFFFFF; 
  padding-bottom: 200px; 
  border-radius: 0 0 20% 20%; 
}
.date { 
  /* 用绝对定位替代负margin，位置更可控 */
  position: absolute;
  top: 120px; /* 根据你的header高度调整，刚好落在toolbar的圆角区域 */
  left: 16px; /* 对应ion-content的padding值 */
  right: 16px;
  z-index: 101; /* 必须高于ion-header默认的z-index（100） */
  padding: 6px; 
  box-shadow: 0px 3px 45px 0px rgb(0 0 0 / 16%); 
  border-radius: 40px; 
  overflow: visible; 
}
/* 给ion-content加顶部内边距，避免页面内容被card遮挡 */
ion-content {
  padding-top: 100px; /* 根据card的实际高度调整 */
}

方法二：调整ion-content的层级与溢出（不移动card位置） #

如果你不想改动HTML结构，可以通过修改样式让ion-content的层级高于header，同时允许内容溢出：

ion-toolbar{ 
  --background:#aac9ff; 
  color: #FFFFFF; 
  padding-bottom: 200px; 
  border-radius: 0 0 20% 20%; 
  position: relative;
  z-index: 99; /* 降低header的z-index */
}
.date { 
  margin-top: -180px; 
  z-index: 100; 
  padding: 6px; 
  box-shadow: 0px 3px 45px 0px rgb(0 0 0 / 16%); 
  border-radius: 40px; 
  overflow: visible; 
}
ion-content {
  z-index: 100; /* 让ion-content整体层级高于header */
  overflow: visible; /* 允许内容溢出容器 */
}

为什么原来的代码不行？ #

1. ion-content的默认z-index低于ion-header，导致内部元素无法突破层级显示在header上方
2. 部分Ionic版本中ion-content默认设置了overflow: auto，会自动裁剪负margin的元素

你可以优先试试第一种方法，定位逻辑更清晰，也更符合Ionic的布局规范～

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