html - スライダーの上に要素を表示する問題

Question

jquery スライダー ( this one ) を実装しています。ここでテスト ページを表示できます。私 が経験している問題は、背景でスライダーが画像をスライドさせている間、いくつかの div 要素 (タッチポイント) を一番上に置いておきたいということです。残念ながら、現時点では、私のタッチポイントはスライドと見なされているようです (おそらく、タッチポイントがラップされている<div ID="slides">ため、DIV「touchPointContainer」スライドが写真のようにスライドするためです。タッチポイントが常に残るようにするには、何を変更する必要がありますか?上に?どうもありがとう

HTML:

<div id="slides">
  <div id="touchPointContainer"> <a href="#" id="touchPoint1" class="touchPoint">
      <p class="initial">Changement</p>
      <p class="final">Le crtreement</p>
      </a> <a href="#" id="touchPoint2" class="touchPoint">
      <p class="initial">Rapidirtre fixé</p>
      </a> <a href="#" id="touchPoint3" class="touchPoint">
      <p class="initial">Orientation</p>
      <p class="final">Le crction</p>
      </a> <a href="#" id="touchPoint4" class="touchPoint">
      <p class="initial">Ressources</p>
      <p class="final">Le coacrtretences</p>
      </a> <a href="#" id="touchPoint5" class="touchPoint">
      <p class="initial">Créativité</p>
      <p class="final">Stimulatrtrer</p>
      </a> <a href="#" id="touchPoint6" class="touchPoint">
      <p class="initial">Autonomie</p>
      <p class="final">L’objecrtreret</p>
      </a> </div>

    <img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
  </div>

CSS:

#touchPointContainer {
    position: relative;
    height: 600px;
}
#touchPointContainer a { text-decoration: none }
.touchPoint {
    position: absolute;
    width: 80px;
    height: 80px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
    color: #5bb6e7;
    text-align: center;
    font-size: 12px;
    -webkit-transition: width .2s, height .2s, margin .2s;
    -moz-transition: width .2s, height .2s, margin .2s;
    -ms-transition: width .2s, height .2s, margin .2s;
    -o-transition: width .2s, height .2s, margin .2s;
    transition: width .2s, height .2s, margin .2s;
    -o-box-shadow: 0 0 4px 6px rgba(0, 0, 0, 0.1);
}
.touchPoint { display: table }
.touchPoint p {
    display: table-cell;
    vertical-align: middle;
    font-size: 11px;
}
.touchPoint .final,
.touchPoint:hover .initial,
.touchPoint:active .initial { display: none }
.touchPoint .initial,
.touchPoint:hover .final,
.touchPoint:active .final { display: table-cell }
.touchPoint:hover,
.touchPoint:active {
    margin: -40px 0 0 -40px;
    padding: 5px;
    width: 250px;
    height: 250px;
    -webkit-transition: width .2s, height .2s, margin .2s;
    -moz-transition: width .2s, height .2s, margin .2s;
    -ms-transition: width .2s, height .2s, margin .2s;
    -o-transition: width .2s, height .2s, margin .2s;
    transition: width .2s, height .2s, margin .2s;
}
#touchPoint1 {
    top: 260px;
    left: 140px;
}
#touchPoint2 {
    top: 240px;
    left: 440px;
}
#touchPoint3 {
    top: 150px;
    left: 670px;
}
#touchPoint4 {
    top: 90px;
    left: 480px;
}
#touchPoint5 {
    top: 390px;
    left: 300px;
}
#touchPoint6 {
    top: 370px;
    left: 670px;
}