почему карта не идет сверху?

Question

эй, содержимое карты не отображается сверху. Оно просто скрывается за фоном, и я хочу, чтобы оно было сверху. обратите внимание, я использую только bootstrap 4

html

<section id="pricing" class="">
<h1 class="text-center  text-uppercase my-5 py-5">services</h1>
<div class="container py-5 my-5">
<div class="row align-items-center justify-content-center">
<div class="col-10 m-auto col-md-3  bg-white  py-5" id="card-pricing">
<h1 class="text-center text-uppercase">basic</h1>
<hr class="my-4">
<p class="lead text-center">
$ <span class="size-grt font-weight-bold ">20 </span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio consectetur, provident molestiae a ad possimus ipsam harum delectus.
</p>
<hr class="my-4">
<div class="d-flex justify-content-center align-items-center">
<button class="btn purchase-btn text-uppercase">purchase</button></div>
</div>
<div class="col-10 m-auto col-md-3 bg-white pricing-middle py-5" >
<h1 class="text-center text-uppercase">basic</h1>
<hr class="my-4">
<p class="lead text-center">
$ <span class="size-grt font-weight-bold ">20 </span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio consectetur, provident molestiae a ad possimus ipsam harum delectus.
</p>
<hr class="my-4">
<div class="d-flex justify-content-center align-items-center">
<button class="btn purchase-btn text-uppercase">purchase</button></div>
</div>
<div class="col-10 m-auto col-md-3 bg-white  py-5" id="card-pricing">
<h1 class="text-center text-uppercase">basic</h1>
<hr class="my-4">
<hr class="my-4">
<div class="d-flex justify-content-center align-items-center">
<button class="btn purchase-btn text-uppercase">purchase</button></div>
</div>
</div>
</div>
</section>

s css file

#pricing{
  background: url('https://images.unsplash.com/photo-1585314062340-f1a5a7c9328d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80') no-repeat;
  height: 100vh;
  width: auto;
  position: relative;
  z-index: -1;
  background-size: 100% 100%;
  clip-path: polygon(100% 0%,100% 75%,50% 100%,0% 75%,0% 0% );
}

прямо сейчас карты выглядят так https://ibb.co/GWVhGY6 и я не дал вам стиль карточек

Answer 1

измените z-index с -1 на 999, чтобы слой вашей карты оказался сверху.

#pricing{
  background: url('https://images.unsplash.com/photo-1585314062340-f1a5a7c9328d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80') no-repeat;
  height: 100vh;
  width: auto;
  position: relative;
  z-index: 999;
  background-size: 100% 100%;
  clip-path: polygon(100% 0%,100% 75%,50% 100%,0% 75%,0% 0% );
}