html - 在 slider 顶部显示元素的问题

Question

我正在实现一个 jquery slider ( this one )。你可以查看我的test page here 我遇到的问题是，我希望一些 div 元素(接触点)保持在顶部，而 slider 在背景中滑动图片。不幸的是，目前我的接触点似乎被认为是幻灯片(可能是因为它们被包裹在 <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;
}

Answer 1

改变触摸元素的位置。顶

position:absolute

和top:20%

右触摸元素位于 left:9%

在 fire bug 中尝试这个，你会知道如何实际实现它:) 注意:更改元素的样式 fr touch ...

图片

为一个持续接触点编辑代码

将 div 包装器代码更改为

    <div id="fullwrapper"><a href="#" id="touchPoint1" class="touchPoint" style="
    z-index: 1111111;
">
      <p class="initial">Changement</p>
      <p class="final">Le crtreement</p>
      </a>

看看效果:)

新图片