Swiper.jsでボタンの位置を変更できない

Question

#　発生している問題

レスポンシブ768px以下のみでのスライド表示にしたいです
Swiper.js でprev,nextボタンの位置がおかしいので適当な場所を変更したいのですがtopやrightなどで位置を変更するとボタンが消えてしまう

#コード

<div class="info-new-articles-wrapper-sp">
	<div class="swiper-container-info-sp">
		<div class="swiper-wrapper">
			<!--この辺PHPいろいろ-->
				<div class="swiper-slide">	
					<div class="page-info-card">
				           この辺imgやテキスト
					</div>
				</div>
　　　　　　　　　　　　　　　　　　　　<!--PHPループ終了-->
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev info-sp-swiper-button"></div>
		<div class="swiper-button-next info-sp-swiper-button"></div>
	</div>
</div>

<script>
 var swiperInfoSp = new Swiper('.swiper-container-info-sp', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      slidesPerView: 1,
      spaceBetween: 10,
      breakpoints: {
        768: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
      }
    });
  </script>

試したこと

swiper.jsのCSSはいじっていないです。

.info-sp-swiper-button {
 top: 60px;
}

などど変更してみましたが、ボタンが丸ごと消えてしまいます。値が大きすぎるのかと思い1pxの移動なども試しましたが、消えてしまいました。

最後に

不足している部分もあるかもしれませんが、是非ともご教授よろしくお願い致します

Answer 1

.swiper-container-info-sp {
  position: relative;
}

上記で解決しました。