Пожалуйста объясните почему я не могу спрятать блок с анимацией под меню(z-index — не помогает)?

Question

[AhmedGasem]

<nav class="bottom-menu">
                 <a href="#" style="border-left:none;">ТВ-шоу</a>
                 <a href="#">Фильмы</a>
                 <a href="#">Трейлеры</a>
                 <a href="#">Телегид</a>
                 <a href="#">Форум</a>
                 <a href="#">Новое</a>

             </nav>
         <div class="trending">
             <p>  Трендовые ТВ-шоу </p>
         </div>
         <div class="dead">
         <img style="width:970px;" src="images/MergedLayers.png">
			 <p>Ходячие мертвецы</p>
             </div>
      </div>

.bottom-menu{
    height: 52px;
    background: linear-gradient(0deg, #4c880b 0%, #7fc434 100%);
    padding-top:14px;
    text-align: center;
}
.bottom-menu a{
   font-size: 18px;
   padding-left:34px;
   padding-right:34px;
   padding-top:16px;
   padding-bottom:16px;
   color:#ffffff;
   font-weight: bold;
   margin-left: -4px;
   text-shadow:black 0 2px 0;
   border-left:1px solid rgba(23, 23, 23, 0.2);
}
.bottom-menu a:hover{
    background: linear-gradient(#a5d644 0%,#64ad10 100%);
    text-decoration: none;
}
.trending{
    position:absolute;
    width:970px;
    height:55px;
    background-color:black;
    margin-top:-55px;
    opacity: 0.5; 
    animation-name: trending;
    animation-duration: 1.5s;
    animation-delay:1s;
    animation-fill-mode:forwards;
	z-index:2;
    
}
.trending p{
    font-size:20px;
    font-weight:bold;
    padding:15px;
    color:#68685e;
}

@keyframes trending{
    100%{ transform: translateY(55px);}
    
}

Answer 1

[Кирилл]

Для .bottom-menu задай position: relative; и z-index больше, чем у блока с анимацией.
P.S. Не нужно писать инлайн-стили. Что бы у первой ссылки убрать бордер достаточно написать в стилях
.bottom-menu a:first-child {
border-left: none;
}