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 -->