我如何使用Z-index使我的div卡的背景图像?

Question

我试图做一个登陆页面，有卡片的背景图像，固定卡片的大小，我想使用z-index，所以我可以但顶部的文本/描述部分，但是z-index没有响应，通过使用max100%的高度&图像的宽度与div的大小相同，但索引不正确，代码如下:

img {
max-width: 100%;
max-height: 100%;
background-size: cover;
position: relative;
z-index: 1;
}
.container .card {
background: lightgreen;
color: black;
display: flex;
justify-content: center;
align-items: flex-end;
width: 285px;
height: 145px;
margin: 15px;
border: 2px solid black;
background-size: cover;
}

<div class="feed">
<div class="card">
<img src="https://c4.wallpaperflare.com/55/365/257/.jpg" alt="">
<div class="card-description">
<h5>Title of Post</h5>
<img src="" alt="text">
<p> Some text here.</p>
</div>
</div>
<div class="card">
<img src="" alt="">
<div class="card-description">
<h5>Title of Post</h5>
<img src="" alt="text">
<p> Some text here.</p>
</div>
</div>
</div>

Answer 1

你需要输入:

.card {
position: relative;
}
.card .card-description {
position: absolute;
z-index: 2;
}