スライドの前後に送らせる矢印の位置を変えたい

Question

前提・実現したいこと

dreamweaverでwebサイトを作っています
jQueryのbxsliderで写真のスライドを作りました
最初は写真を送らせる矢印が出なかったのですが、指定したパスに矢印の画像がなかったので、画像ファイルを指定されたパスに動かせば、表示されました
しかし、表示された矢印が画像の左右になく、なぜかヘッダーあたりの画面両端に表示されてしましました

該当のソースコード

jQueryの公式ホームページからインストールしたコードです

jquery.bxslider.css
jquery.bxsilder.min.js


/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('images/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('images/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}

試したこと

position: absolute;
変更後　position: relative;→画像の下にきてしまったのでabsoluteに戻す

Answer 1

cssのコードだけでは再現できないので何がどうなっているのか分かりませんが、
下記な感じにするとどうなりますか？

<div class="親">
　<ul class="bxslaider">
    <li>画像</li>
    <li>画像</li>
    <li>画像</li>
  </ul>
<div class="次へボタン"></div>
<div class="前へボタン"></div>
</div>

親 {
 position: relative;
}

Answer 2

これだけではよくわかりませんが、↓で思っていることに近い状態になるような気がします。

.bx-wrapper {
  position: relative;
}