使用margin-top的负面问题时，z-index不起作用

Question

我的div元素带有白色空间和按钮，位于图像下方。我希望图像上有按钮而不是白色，但是当我抬起图像时（使用margin-top：-55px;），下面的按钮位置和z-index不起作用。

.main_panel {
  text-align: center;
  z-index: 9999;
  overflow: visible;
}

section {
  height: 100vh;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.slider {
  background-color: #fff;
}

.slider img {
  margin-top: -55px;
  z-index: 1;
}

.main_button_left {
  font-weight: 700;
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  padding: 15px 0px 15px 10px;
  border-radius: 3px;
  background: #ff6500;
  transition: 1s;
  border-color: #ff6500;
  border-bottom-left-radius: 10px;
  font-size: 15px;
  width: 200px;
}

.main_button {
  font-weight: 700;
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  padding: 15px 0px 15px 10px;
  border-radius: 3px;
  background: #ff6500;
  transition: 1s;
  border-color: #ff6500;
  font-size: 15px;
  width: 200px;
}

button.main_button:hover,
button.main_button_right:hover,
button.main_button_left:hover {
  background: #ffcd07;
  border-color: #ffcd07;
}

.main_button_right {
  font-weight: 700;
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  padding: 15px 0px 15px 10px;
  border-radius: 3px;
  background: #ff6500;
  transition: 1s;
  border-color: #ff6500;
  border-bottom-right-radius: 10px;
  font-size: 15px;
  width: 200px;
}

<section class="slider">
  <div class="main_panel">
    <button class="main_button_left">Some text</button>
    <button class="main_button">Some text</button>
    <button class="main_button">Some text</button>
    <button class="main_button">Some text</button>
    <button class="main_button">Some text</button>
    <button class="main_button">Some text</button>
    <button class="main_button">Some text</button>
    <button class="main_button_right">Some text</button>
  </div>
  <img src="http://dummyimage.com/1200x500">
</section>