1

Jquery パネルのスライド ボタンを押すと、下にスライドしますが、その下のコンテンツも移動します。Jquery スライド パネルをその下のコンテンツの上に開きたいと思います。その下のコンテンツは画像スライダーです。私は画像ギャラリーのウェブサイトに取り組んでいます。画像スライダーとスライド パネルの両方の CSS を次に示します。誰かがこれを修正できることを願っています。

<!-- Sliding panel CSS--> 
body {
    margin: 0 auto;
}
#panel {
    position: relative;
    height: 510px;
    display: none;
}
.slide {
    z-index: 10;
    position: absolute;
    height: 60px;
    width:1344px;
    border: solid 1px black;
    background: url(images/sliderback.png);
}
.btn-slide {
    z-index: 10;
    position: absolute;
    border: 1px solid black;
    background: url();
    text-align: center;
    width: 50px;
    height: 50px;
    margin: -10px 1270px;
    display: block;
    color: #fff;
    text-decoration: none;
}
<!-- End of sliding panel CSS --> 
<!-- Image Slider CSS --> 
#container{
    position:relative;
}
#prev{
    position: absolute;
    cursor: pointer;
    top:245px;
    left:-20px;
    z-index:10;
    width:80px;
    height:100px;
}
#next{
    position:absolute;
    cursor: pointer;
    top:245px;
    left:1280px;
    z-index:10;
    width:80px;
    height:100px;
}
.slider{
    position: relative;
    height:570px;
    width:1366px;
}
<!--Image Slider CSS -->

<!-- Sliding panel CSS-->
body {
    margin: 0 auto;
}
#panel {
    position: relative;
    height: 510px;
    display: none;
}
.slide {z-index: 10;
    position: absolute;
    height: 60px;
    width:1344px;
    border: solid 1px black;
    background: url(images/sliderback.png);
}
.btn-slide {
    z-index: 10;
    position: absolute;
    border: 1px solid black;
    background: url();
    text-align: center;
    width: 50px;
    height: 50px;
    margin:  -10px 1270px;
    display: block;
    color: #fff;
    text-decoration: none;
}

<!-- End of sliding panel CSS --> 

<!-- Image Slider CSS --> 
#container{
    position:relative;
}
#prev{
    position: absolute;
    cursor: pointer;
    top:245px;
    left:-20px;
    z-index:10;
    width:80px;
    height:100px;
}
#next{
    position:absolute;
    cursor: pointer;
    top:245px;
    left:1280px;
    z-index:10;
    width:80px;
    height:100px;
}
.slider {
    position: relative;
    height:570px;
    width:1366px;
}
<!--Image Slider CSS -->
4

0 に答える 0