如何使元素在叠加层中可见？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索引基本上可以帮助您确定项目的级别。

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

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