html - 如何让几个div在同一个位置动态

Question

我想要一个带有图像的 div，然后是底部和顶部带有渐变的一段文本。

.cbr-product-square {
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  position: relative;
  height: 350px;
}

.cbr-product-click {
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.cbr-product-buttons {
  color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.65) 70%, rgba(0, 0, 0, 0) 100%);
  z-index: 10;
  height: 40px;
  line-height: 40px;
  width: 100%;
  margin-bottom: -40px;
  text-align: center;
}

.cbr-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cbr-product-desc {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  z-index: 10;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.65) 70%, rgba(0, 0, 0, 0) 100%);
  height: 80px;
  margin-top: -80px;
  padding-top: 30px;
  padding-left: 10px;
  width: 100%;
}

<div class="row cbr-product-square">
  <div class="cbr-product-click" [routerLink]="['productsOptions', element.id]">
    <div class="cbr-product-buttons">
      <button class="cbr-delete-btn" *ngIf="checkRole('administration')" mat-icon-button (click)="deletePosition(element.id,element.name)"><i class='far fa-times-circle'></i></button>&nbsp
      <button mat-icon-button *ngIf="checkRole('administration')" class="cbr-edit-btn" (click)="editProduct(element.id)"><i class='far fa-edit'></i></button>
    </div>
    <img class="cbr-product-image" [src]=element.imageBlob />
    <div class="cbr-product-desc">
      {{element.name}} <br/> {{element.price }} PLN
    </div>
  </div>
</div>

现在，我可以看到 div 中的图像以及底部和顶部的文本，但看不到渐变。它用作底部和顶部 div 的背景。当图像消失时，渐变出现(就像它总是在图像下方)。我试图对它们进行 z-index，但它什么也没给我。

Answer 1

给图片添加z-index:-1和position:relative:

.cbr-product-square{
  padding: 15px;
  border: 1px solid rgba(0,0,0,0.4);
  position: relative;
  height: 350px;
}
.cbr-product-click
{
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.cbr-product-buttons{
  color: rgba(255,255,255,0.8);
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0) 100%);
  z-index: 10;
  height: 40px;
  line-height: 40px;
  width: 100%;
  margin-bottom: -40px;
  text-align: center;
}
.cbr-product-image{
    z-index:-1;
    position:relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cbr-product-desc{
    text-align: center;
    color: rgba(255,255,255,0.8);
    z-index: 10;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0) 100%);
    height: 80px;
    margin-top: -80px;
    padding-top: 30px;
    padding-left: 10px;
    width: 100%;
}

<div class="row cbr-product-square">
          <div class="cbr-product-click" [routerLink]="['productsOptions', element.id]"  >
            <div class="cbr-product-buttons">
              <button class="cbr-delete-btn" *ngIf="checkRole('administration')" mat-icon-button (click)="deletePosition(element.id,element.name)" ><i class='far fa-times-circle'></i></button>&nbsp
              <button  mat-icon-button *ngIf="checkRole('administration')" class="cbr-edit-btn" (click)="editProduct(element.id)" ><i class='far fa-edit'></i></button>
            </div>
            <!-- Free Photo by https://www.pexels.com/@nathan-moore-1300563
-->            <img class="cbr-product-image" src="https://images.pexels.com/photos/2479642/pexels-photo-2479642.jpeg?cs=srgb&dl=altitude-conifers-frost-2479642.jpg&fm=jpg&w=200" />
            <div class="cbr-product-desc">
              {{element.name}} <br/>
              {{element.price }} PLN
            </div>
          </div>
        </div>