1つのイメージを持つスライダ1つのイメージ

Question

こんにちはコミュニティ私は絶対/相対的な位置のスライダと2つのイメージでロックされていますか？私はbxsliderを使用しています

私を助けてくれますか？

これはリンクhttp://pier17.fr/beta-sanem/nos-realisations.html

これは私のコードのHTMLである：

   <div id="slider-realisations"> 
        <ul class="bxslider"> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
         <li> 
          <div class="slide-bloc"> 
          <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
          <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
          </div> 
         </li> 
        </ul> 
       </div> 

そして、これが私のCSSです：

#slider-realisations .bxslider { 
    text-align: center; 
} 
#slider-realisations .bxslider img { 
    width: auto; 
} 
#slider-realisation { 
    position: relative; 
} 
#slider-realisations .slide-bloc { 
    position: relative; 
} 
#slider-realisations .bxslider img.contour { 
    position: relative; 
    width: 100%; 
    margin-left: 27px; 
} 
#slider-realisations .bxslider img.slide-maison { 
    width: 913px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-right: 16px; 
    padding-top: 105px; 
} 

人が解決策を持っている場合は、私は準備ができています。

ありがとうございました

Answer 1

問題にあなたの子供を作る必要があります：CSS FOR

：HTML FOR

#slider-realisations { 
     position: relative; 
     overflow: hidden; 
    } 
    #slider-realisations .realisations img { 
     width: 100%; 
    } 
    #slider-realisations .realisations img.contour { 
     position: relative; 
     z-index: 10; 
     width: 100%; 
     height: auto; 
    } 
    #slider-realisations .realisations img.slide-maison { 
     position: absolute; 
     z-index: 5; 
     top: 0%; 
     max-width: 100%; 
     padding-right: 155px; 
     padding-top: 107px; 
     padding-left: 90px; 
    } 

：

<div id="slider-realisations"> 
    <ul class="realisations"> 
    <li> 
     <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
     <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
    </li>  <li> 
     <img class="contour" src="img/contour-slide.png" alt="Maison Sanem"> 
     <img class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem"> 
    </li> 
    </ul> 

Answer 2

問題はあなたのCSSです。あなたは相対

.slide-bloc { 
    position: relative; 
} 

で親を作り、解決絶対

img.contour { 
    position: absolute; 
}