Отображение фоновой кнопки на переднем плане

Question

извините за мой английский sh ...

Я пытаюсь создать веб-сайт электронной коммерции.

Моя проблема заключается в нажатии кнопки «Добавить в корзину» (Zum warenkorb hinzufügen) и в окне открывается рисунок + и - , они отображаются ...

Когда новое окно перемещается вправо на

#layerPreviewContent-3 {position:absolute;z-index:1;display:none;background-color:#dedee0; margin-top: 0px;left:50%;
                width:30%;
                margin-left:-150px;
                height:40%;

                -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
                -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
                box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);


}

Если margin-left:-450px; перемещается вправо,

и как вы можете видеть, рисунок исчезает ...

Мой вопрос в том, как можно предотвратить, когда в новом окне открывается рисунок, рисунок + и - не отображаются.

My Html,

<div class="container">


  <div class="kaufen">

    <form class="form-basket" method="post"  enctype="multipart/form-data">
         <fieldset class="addtobasket-container">    

            <span class="tittle-kaufen">Rucksack aus Hanf Gelbe mit Zwei Riemen</span>

            <span class="preis"> Preis 40 &euro; </span>

            <span class="piece">Stück</span>

           <div class="quantity">


                      <input type="button" value="+" class="plus">
                       <input type="number" step="1" max="99" min="1" value="1" title="Qty" class="qty" size="4">
                      <input type="button" value="-" class="minus">
           </div>
           <div class="button_wrap"  >
                 <button class="button_wrap_buttom" type="buttom"  onclick='layer_show_3(event);' ><span>Zum warenkorb hinzufügen</span></button>
           </div> 
        </fieldset> 
     </form>      
                       <!-- En el momento que se pulse sobre la capa transparente se cerrara -->
                   <div id="layerPreview-3" > </div>
                   <div id='layerPreviewContent-3'>
                       <!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
                      <div id="tittel-text">Rucksack aus Hanf Gelbe <span id="closse-text"  onclick="layer_close_3(event);">Schließen</span></div>
                      <div  id="bild-text"><img  alt=""  src="photo/113.jpg"></div>
                        <div id="text-pruduct">
                        <p>Verfügbarkeit: <b>eine Menge</b></p>
                        <p>Zustellung innerhalb von: <b>1-2 Tage</b></p>

                      </div>
                   </div>     

    </div>
</div>

Здесь весь код, Html, Css и Jquery

Может ли кто-нибудь сказать, как решить эту проблему?

Answer 1

Просто увеличьте z-index элемента #layerPreviewContent-3.

#layerPreviewContent-3 {
    position: absolute;
    /*CHANGE Z-INDEX TO A BIG NUMBER*/
    z-index: 9999;
    display: none;
    background-color: #dedee0;
    margin-top: 0px;
    left: 50%;
    width: 30%;
    margin-left: -150px;
    height: 40%;
    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
}