Flexslider 顶部有导航按钮，无法获取工作链接

Question

我想使用我的 flexslider 浏览我的页面。它不会让我点击滑块顶部的按钮。 滑块：

button,
h3 {
  position: absolute;
  z-index: 2;
}

.slides button {
  bottom: 0;
  margin: 20px;
  padding: 15px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #1C934E;
}

.slides button:hover {
  background-color: #146D3A;
}

.slides button a {
  text-decoration: none;
  color: #FBEDED;
}

.slides button a:hover {
  color: #C5BBBB;
}

<header>
  <div class="flexslider">
    <ul class="slides">
      <li>
        <button type="button"><a href="#">Learn more about the Cheetah!</button>
        <img src="img/cheetahslide.jpg" alt="Cheetah walk around savannah"></a>
        <p class="flex-caption"></p>
      </li>
      <li>
        <button type="button"><a href="#">Learn more about the Elephant!</a></button>
        <img src="img/elephantslide.jpg" alt="elephant walking in field">
     </li>
      <li>
        <button type="button"><a href="#">Learn more about the Komodo Dragon!</a></button>
        <img src="img/komodoslide.jpg" alt="komodo dragon on a rock">
      </li>
    </ul>
  </div>
</header>

我不确定这是否只是一个flexslider的问题。每当我使用检查器时，它甚至不显示按钮。

我尝试改变按钮的位置并尝试不同的位置。

Answer 1

检查 .flexslider 和 .slides 类是否具有相对位置。

.flexslider,
.slides {
    position: relative;
}