更改绝对元素的CSS位置

Question

I wanna make a slider with JQuery Swiper plugin that slider navigation's is out of swiper are. I have two element for navigation:

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

When I change right property of .swiper-button-next is go under parent element and doesn't show properly.

Here is a JsFiddle example.

Here is an image of my expected result:

Answer 1

You can add padding in parent element and set the navigation position

.swiper-container {
   padding: 0 30px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left:0;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right:0;
}

Updated Demo

Answer 2

尝试给予.swiper-button-next类更高的z-index