CSS z-index не работает при двух блоках absolute

Добрый день, у меня есть слайдер

  <section class="slider">
    <div class="flexslider">
                <ul class="slides">
        <li>
            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                        <div class="text">
                                <span>TECHNIK <p>LOGISTYK</p></span>
                        </div>
            </li>
            <li>
            <img src="images/kitchen_adventurer_lemon.jpg" />
            </li>
            <li>
            <img src="images/kitchen_adventurer_donut.jpg" />
            </li>
            <li>
            <img src="images/kitchen_adventurer_caramel.jpg" />
            </li>
      </ul>
                <div class="logoty">
                </div>
    </div>
  </section>

class logoty это блок который при изменении картинки остается поверх нее, а класс text должно быть видно поверх класса logoty. Тут показано что у меня вышло текст ниже фона

текст который должен быть выше Вот еще код CSS

.logoty{
  width: 480px;
  height: 100%;
  right: 0;
  background: blue;
  position: absolute;
  z-index: 2;
}
.text{
  z-index: auto;
  position: absolute;
  top: 0;
  right: 0;
}
.slides{
  position: relative;
}
.slides li{
  position: relative;
}