如何使元素在叠加层内可见？ HTML & CSS

Question

这是我的演示：https://stackblitz.com/edit/js-6whwk2?file=style.css

这是代码

HTML

<div class="my-overlay" padding [hidden]="overlayHidden">
    <ion-card class="card">
        <ion-card-content>
            Explore the App! See how everwell can help you achive your health goals.
        </ion-card-content>
    </ion-card>
    <div class="circle" (click)="hideOverlay()"></div>
</div>

CSS

.card {
  background-color: white;
}

.circle {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4);
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 100%;
  display: flex;
  height: 64px;
  width: 64px;
  float: right;
  position: relative;
  top: 100%;
  transform: translateY(-100%);
}

.my-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 20;
  top: 0;
  left: 0;
}

ion-card {
  height: 9% !important;
  --color: #434d65;
  border-radius: 12px;
  bottom: 64px;
  position: absolute;
}

ion-card-content {
  padding-top: 11px;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 20px !important;
}

我想要实现的是能够将我的离子卡放置在覆盖层上方，使其可见而不是在覆盖层下方。我试图从 class .cirle 中删除它（见下文），但这导致我遇到另一个问题，即圆圈的位置，当然，我可以将它的边距放在右边页面底部，但这没有响应，看起来不是一个好方法。

  position: relative;
  top: 100%;
  transform: translateY(-100%);

我是编码的新手，我在学习项目时正在这样做，我挣扎了几天。如果有人有任何建议，我将不胜感激。非常感谢。

Answer 1

尝试使用 z-index: 1 :)

z-index 基本上可以帮助您确定项目的级别。

更多信息在这里： https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

或者为了便于阅读，因为您是编码新手：https://www.w3schools.com/cssref/pr_pos_z-index.asp

如何使元素在叠加层内可见？ HTML & CSS

How to make an element visible inside an overlay? HTML & CSS

html

css

responsive-design