Css 在幻灯片3中添加一个删除

我想在幻灯片的右上角添加一个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>

---

你能更具体地说明什么不适合你吗？你的代码把X放在左边，它对我来说仍然存在。到底是什么问题？对我来说不是在左边，我希望他在所有幻灯片的左上方：/

    .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;
}