html – quiero poner el footer (color oscuro) detras de la card blanca pero esta no deja, ¿qué podria hacer?

.container-card{
    margin-bottom: 50px;
    width: 100%;
    height: 100px;
    position: relative;
}
.card-smile{
    text-align: center;
    margin: 50px 10px;
    position: absolute;
    top: -10px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-smile > h3{
    font-size: 1.09em;
}



.btn-big{
    border: none;
    border-radius: 2em;
    background-color: rgba(254,85,194,255);
    color: #FFF;
    font-size: .6em;
    margin-bottom: 1.5em;
    padding: 1.2em 4em;
}


/* footer */

footer{
    background: #00252e;
    width: 100%;
    heigth:300px;
    z-index: -10;
}
<div class="conteiner2-card">
  <div class="container-card">
    <div class="card-smile">
      <h3>Ready To Build Your Community?</h3>
      <button class="btn btn-big btn-dffcolor">
        Get Started For Free
      </button>  
  </div>
</div>
</div>
<footer>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda fugit a necessitatibus perspiciatis ullam ex praesentium, quas id eum. Optio nostrum labore cum esse quasi quae odio non molestias magni? </p>
</footer>