在幻灯片中添加一个dismiss离子3

Question

我想在幻灯片的右上角添加一个X，并希望他始终可见。 没有设法找出问题。

此时X按钮位于滑块之外。

我的HTML

<ion-content padding>
      <button>
          <ion-icon class="close" name="close" (click)="dismiss()"></ion-icon>
        </button>
      <ion-slides pager>
        <ion-slide>
          <h2>Slide 1</h2>
        </ion-slide>
        <ion-slide >
          <h2>Slide 2</h2>
        </ion-slide>
        <ion-slide>
          <h2>Slide 3</h2>
        </ion-slide>
        <ion-slide>
            <h2>Slide 4</h2>
          </ion-slide>
          <ion-slide>
              <h2>Slide 5</h2>
            </ion-slide>
            <ion-slide >
                <h2>Slide 6</h2>
              </ion-slide>
      </ion-slides>
  </ion-content>

我的scss

    .swiper-pagination-bullet {
  background: black;
  opacity: 0.50;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: black;
}


ion-slides {
  background-color: red;
}
ion-slides .close {
margin-top: 100%;
  font-size: 2em;
}