фиксированный элемент теряется, когда он находится поверх другого абсолюта

Question

У меня есть стрелка для фиксированной навигации, ее работа корректна, пока она не пройдет над абсолютным элементом со скользящей анимацией влево, в этот момент моя «фиксированная» стрелка идет вместе с анимацией, это потерян с экрана.

У меня есть два абсолютных деления в относительном контейнере, когда пользователь прокручивает до этой позиции, два деления выходят за пределы экрана, влево и вправо соответственно. Когда анимация запускается, моя навигационная стрелка падает вместе с ней.

//this is my scss

/*******
 ARROW
********/

@import '../../scss/variables';

.arrow{
display: block;
position: fixed;
 right: 15px;
 bottom: 15px;
  svg{
    fill: #fff;
    width:50px;
  }
}
.my_bounce {
  animation-name: my_bounce;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

/***********
BOXES
************/
.about_cont{
  background: url('../../images/about-movil.jpg') top center;
  background-size: cover;
  display: flex;
  height: 100vh;
  position: relative;
}
.about_boxes{
  display: flex;
  width: 50vw;
  align-items: center;
  font-family: 'Panton';
  position: absolute;
  height: 100vh;;
}
#about_box_1{
  justify-content: flex-end;
  background: $sec;
  left: 0;
  p{
    font-size: 2.5rem;
  }
}
#about_box_2{
  color: #fff;
  background: $prim;
  right: 0;
 p{
   font-size: 2.5rem;
  }
}

Кто-нибудь знает, что не так?

Answer 1

Так как мы не можем увидеть ваш html, мы не можем быть уверены, в чем проблема, но я уверен, что добавление

z-index: 1;

к вашей стрелке исправит проблему. Если это не сработает, попробуйте большее число.

Answer 2

Без HTML-файла мы не можем сказать об этом code.Html-файле с помощью CSS-файла