スライドショーの矢印の位置について

Question

スライドショーを作るためにflexsliderを使用しているのですが、
その矢印の位置が画面幅を狭めると画像とかぶってしまいます。
右の矢印はwidthを%指定したので狭めてもかぶらないのですが、左の矢印はwidthを指定してもかぶってしまいます。
どなたか対処法をご教授ください。

CSS
.flex-direction-nav .flex-prev {
left: 9%;
background-size: 35px;
background-image: url(../image/hidarii.png);
background-repeat: no-repeat;
text-indent: -9999px;
}

.flex-direction-nav .flex-next {
width: 17%;
background-image: url(../image/migi.png);
background-size: 35px;
background-repeat: no-repeat;
text-indent: -9999px;
}

Answer 1

flexsliderの矢印は、.flex-viewportを基準に絶対配置されているはずなので、

.flex-direction-nav .flex-prev {
  left: -●px;
}
.flex-direction-nav .flex-next {
  right: -●px;
}

上記のように、表示エリアの左右それぞれ外側に配置されるように、負の値を使って絶対配置してやれば良いのではないでしょうか？

※実際のflexsliderの設定やHTMLソース、作りたい最終デザインが分からないのであくまで一般論です。