Не работает z-index

[fenix_63]

Всем привет! Народ, есть у меня страничка: Страница .  Там есть раздел "История компании". Там слайдер. У этого слайдера есть "пагинатор" - кругляши для перехода между стлайдами. Мне надо между этими кругляшами линию красную разместить, да так, чтобы линия была на заднем плане, а сами кругляши - на переднем. Как я только с z-index не игрался, не помогает. И позиционировать пробовал, и opacity менять пробовал, всё никак не могу это сделать. Народ, кто знает, помогите пожалуйста.

[prophet_07]

В данном случае можно добавить background: #fff; для .bx-wrapper .bx-pager.bx-default-pager a{}
Если правильно понял.

[wwt]

.box {
  position: relative;
}
.box::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 100%;
  background-color: red;
  top: 50%;
  left: 0;
  margin-top: -3px;
  z-index: -1;
}