我的网站上有一个SoundCloud音乐播放器，但我希望它有一个position: fixed;属性，但每当我尝试使用我的图像滑块时，它都会覆盖它。我尝试过使用z-index，但我可能没有正确使用它，任何帮助都表示赞赏。
我的代码：
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>The Free Loves</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="freeloves.css">
</head>
<body>
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/logo.png" class="logo" alt="The Free Loves" width="544" height="100" /></li>
<li><a href="test.html">Home</a></li>
<li><a href="test/index.html%3Fp=2103.html">Album <img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
<li><a href="test/index.html%3Fp=2441.html">Album Featured</a></li>
<li class="submenu-item2"><a href="test/index.html%3Fp=2103.html">No Space<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=2377.html">Album 1 Column, No Space</a></li>
<li><a href="test/index.html%3Fp=2356.html">Album 2 Columns, No Space</a></li>
<li><a href="test/index.html%3Fp=2103.html">Album 3 Columns, No Space</a></li>
<li><a href="test/index.html%3Fp=2357.html">Album 4 Columns, No Space</a></li>
</ul>
</li>
<li class="submenu-item62"><a href="test/index.html%3Fp=2360.html">With Space <img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=2378.html">Album 1 Column With Space</a></li>
<li><a href="test/index.html%3Fp=2361.html">Album 2 Columns With Space</a></li>
<li><a href="test/index.html%3Fp=2360.html">Album 3 Columns With Space</a></li>
<li><a href="test/index.html%3Fp=2362.html">Album 4 Columns With Space</a></li>
</ul>
</li>
<li id="menu-item-3251" class="menu-item menu-item-type-taxonomy menu-item-object-album menu-item-3251"><a href="test/album/hundred-miles/index.html">Inside Album</a></li>
</ul>
</li>
<li><a href="test/index.html%3Fp=2211.html">Event <img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
<li><a href="test/index.html%3Fp=2079.html">Event List</a></li>
<li><a href="test/index.html%3Fp=2211.html">Event List With Month</a></li>
<li><a href="test/index.html%3Fp=2434.html">Event Widget Style</a></li>
<li><a href="test/index.html%3Fp=2101.html">Single Event</a></li>
</ul>
</li>
<li><a href="test/index.html%3Fp=2446.html">Members</a></li>
<li><a href="#">Pages <img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
<li><a href="http://themes.goodlayers2.com/musicclub/404error">404 Page</a></li>
<li class="submenu-item50"><a href="test/index.html%3Fp=1424.html">Features <img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=1424.html">New Page Builder</a></li>
<li><a href="test/index.html%3Fp=1482.html">Parallax/Color Wrapper</a></li>
<li><a href="test/index.html%3Fp=1476.html">Custom Skin</a></li>
<li><a href="test/index.html%3Fp=1493.html">Sidebar Size Customizable</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=1566">Scalable Container</a></li>
<li><a href="test/index.html%3Fp=1572.html">Floating Navigation</a></li>
<li><a href="test/index.html%3Fp=1569.html">Boxed/Full Style</a></li>
<li><a href="test/index.html%3Fp=1575.html">Woocommerce Friendly</a></li>
<li><a href="test/index.html%3Fp=1496.html">Mega Menu</a></li>
<li><a href="test/index.html%3Fp=1513.html">Unlimited Sidebar</a></li>
<li><a href="test/index.html%3Fp=1510.html">Font Uploader</a></li>
</ul>
</li>
<li class="submenu-item51"><a href="test/index.html%3Fp=1321.html">Shop<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=1231.html">Shop With Sidebar</a></li>
<li><a href="test/index.html%3Fp=1321.html">Shop Full Width</a></li>
<li><a href="test/index.html%3Fp=1232.html">Cart</a></li>
<li><a href="test/index.html%3Fp=1233.html">Checkout</a></li>
<li><a href="test/index.html%3Fp=1234.html">My Account</a></li>
</ul>
</li>
<li><a href="test/index.html%3Fp=1629.html">Contact Page 1</a></li>
<li><a href="test/index.html%3Fp=1631.html">Contact Page 2</a></li>
<li class="submenu-item52"><a href="test.html#">Video Tutorial<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=1746.html">Installing theme and Setting as demo site</a></li>
<li><a href="test/index.html%3Fp=1762.html">Page Builder</a></li>
<li><a href="test/index.html%3Fp=1748.html">Creating Portfolio & Filterer</a></li>
<li><a href="test/index.html%3Fp=1750.html">Creating Blog</a></li>
<li><a href="test/index.html%3Fp=1754.html">Thumbnail Management</a></li>
<li><a href="test/index.html%3Fp=1752.html">Creating Gallery</a></li>
</ul>
</li>
<li class="submenu-item53"><a href="test.html#">Gallery<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul class="dl-submenu">
<li><a href="test/index.html%3Fp=1598.html">Gallery 2 Columns</a></li>
<li><a href="test/index.html%3Fp=1602.html">Gallery 3 Columns</a></li>
<li><a href="test/index.html%3Fp=1605.html">Gallery 4 Columns</a></li>
<li><a href="test/index.html%3Fp=1620.html">Gallery 5 Columns</a></li>
<li><a href="test/index.html%3Fp=2419.html">Gallery 2 Columns With Caption</a></li>
<li><a href="test/index.html%3Fp=2420.html">Gallery 3 Columns With Caption</a></li>
<li><a href="test/index.html%3Fp=2421.html">Gallery 4 Columns With Caption</a></li>
<li><a href="test/index.html%3Fp=2422.html">Gallery 5 Columns With Caption</a></li>
</ul>
</li>
<li class="menu-item"><a href="test/index.html%3Fp=84.html">Testimonial</a></li>
</ul>
</li>
<li class="menu-item"><a href="http://www.thefreeloves.com/test/?page_id=2171">Portfolio<img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
<li class="submenu-item54"><a href="test.html#">Portfolio With Text<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/portfolio-1-column-with-text-and-space/page/1/index.html">Portfolio 1 Column With Text And Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=906">Portfolio 2 Columns With Text And Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=100">Portfolio 3 Columns With Text And Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=908">Portfolio 4 Columns With Text And Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2147">Portfolio 2 Columns With Text, No Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2146">Portfolio 3 Columns With Text, No Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2148">Portfolio 4 Columns With Text, No Space</a></li>
</ul>
</li>
<li class="submenu-item70"><a href="test.html#">Portfolio Modern<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/portfolio-1-column-modern-with-space/page/1/index.html">Portfolio 1 Column Modern Style With Space</a></li>
<li><a href="test/portfolio-2-columns-modern-with-space/page/1/index.html">Portfolio 2 Columns Modern Style With Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2161">Portfolio 3 Columns Modern Style With Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2162">Portfolio 4 Columns Modern Style With Space</a></li>
<li><a href="test/portfolio-2-columns-modern-style-no-space/page/1/index.html">Portfolio 2 Columns Modern Style, No Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2171">Portfolio 3 Columns Modern Style, No Space</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=2170">Portfolio 4 Columns Modern Style, No Space</a></li>
</ul>
</li>
<li class="submenu-item71"><a href="test.html#">Portfolio With Filter<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="http://www.thefreeloves.com/test/?page_id=954">Portfolio Grid 1 Columns With Filter</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=952">Portfolio Grid 2 Columns With Filter</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=949">Portfolio Grid 3 Columns With Filter</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=947">Portfolio Grid 4 Columns With Filter</a></li>
</ul>
</li>
</ul>
<li class="menu-item"><a href="test/blog-full-with-right-sidebar/page/1/index.html">Blog<img src="arrow.png" alt="arrow" class="arrow3"></a>
<ul>
<li class="submenu-item72"><a href="test.html#">Blog Full<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/blog-full-with-right-sidebar/page/1/index.html">Blog Full With Right Sidebar</a></li>
<li><a href="test/blog-full-with-left-sidebar/page/1/index.html">Blog Full With Left Sidebar</a></li>
<li><a href="test/blog-full-with-both-sidebar/page/1/index.html">Blog Full With Both Sidebar</a></li>
<li><a href="test/blog-full-without-sidebar/page/1/index.html">Blog Full Without Sidebar</a></li>
</ul>
</li>
<li class="submenu-item73" data-column="three columns" data-size="1/4"><a href="test.html#">Blog Column<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/blog-1-column/page/1/index.html">Blog 1 Column (Right Sidebar)</a></li>
<li><a href="test/blog-2-columns/page/1/index.html">Blog 2 Columns (Right Sidebar)</a></li>
<li><a href="test/index.html%3Fp=878.html">Blog 3 Columns</a></li>
<li><a href="test/blog-4-columns/page/1/index.html">Blog 4 Columns</a></li>
</ul>
</li>
<li class="submenu-item74"><a href="test.html#">Blog Masonry<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=887.html">Blog 2 Columns – Masonry (Right Sidebar)</a></li>
<li><a href="test/index.html%3Fp=888.html">Blog 3 Columns – Masonry</a></li>
<li><a href="test/index.html%3Fp=889.html">Blog 4 Columns – Masonry</a></li>
</ul>
</li>
<li class="submenu-item55"><a href="test/index.html%3Fp=2063.html">Blog Medium<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=2065.html">Blog Medium With Left Sidebar</a></li>
<li><a href="test/index.html%3Fp=2063.html">Blog Medium With Right Sidebar</a></li>
<li><a href="test/index.html%3Fp=2067.html">Blog Medium With Both Sidebar</a></li>
<li><a href="test/blog-medium-without-sidebar/page/1/index.html">Blog Medium Without Sidebar</a></li>
</ul>
</li>
</ul>
<li><a href="test/index.html%3Fp=120.html">Shortcodes <img src="arrow.png" alt="arrow" class="arrow4"></a>
<ul>
<li class="submenu-item61 menu-code"><a href="test.html#">Set 1<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=149.html">Accordion/Toggle Box</a></li>
<li><a href="test/index.html%3Fp=784.html">Audio Shortcode</a></li>
<li><a href="test/index.html%3Fp=156.html">Button</a></li>
<li><a href="test/index.html%3Fp=1017.html">Column Shortcode</a></li>
<li><a href="test/index.html%3Fp=203.html">Divider</a></li>
<li><a href="test/index.html%3Fp=2541.html">Event Widget</a></li>
<li><a href="test/index.html%3Fp=705.html">Gallery Shortcode</a></li>
</ul>
</li>
<li class="submenu-item60 menu-code"><a href="test.html#">Set 2<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=296.html">Heading Tag</a></li>
<li><a href="test/index.html%3Fp=653.html">icons & icon boxes</a></li>
<li><a href="test/index.html%3Fp=211.html">Lightbox & Frames</a></li>
<li><a href="test/index.html%3Fp=236.html">Notification Boxes</a></li>
<li><a href="test/index.html%3Fp=456.html">Members</a></li>
<li><a href="test/index.html%3Fp=2525.html">Music Player</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=1039">Post Slider</a></li>
</ul>
</li>
<li class="submenu-item80"><a href="test.html#">Set 3<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul class="sub-menu">
<li><a href="http://www.thefreeloves.com/test/?page_id=1400">Price Table</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=1084">Process</a></li>
<li><a href="http://www.thefreeloves.com/test/?page_id=258">Progress Circle</a></li>
<li><a href="test/index.html%3Fp=245.html">Skills</a></li>
<li><a href="test/index.html%3Fp=1045.html">Slider Shortcode</a></li>
<li><a href="test/index.html%3Fp=640.html">Space</a></li>
</ul>
</li>
<li class="submenu-item81"><a href="test.html#">Set 4<img src="arrow.png" alt="arrow" class="arrow2"></a>
<ul>
<li><a href="test/index.html%3Fp=116.html">Styled Box</a></li>
<li><a href="test/index.html%3Fp=285.html">Stunning Text</a></li>
<li><a href="test/index.html%3Fp=687.html">Table</a></li>
<li><a href="test/index.html%3Fp=218.html">Tabs</a></li>
<li><a href="test/index.html%3Fp=428.html">Testimonial & Quote</a></li>
<li><a href="test/index.html%3Fp=120.html">Typography</a></li>
<li><a href="test/index.html%3Fp=797.html">Video</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
<div class="slider">
<div id="toggle-left" class="toggles"><i><img src="arrow-right.png" alt="left arrow" class="toggle-arrow" id="left-arrow"></i></div>
<div id="toggle-right" class="toggles"><i><img src="arrow-right.png" alt="right arrow" class="toggle-arrow"></i></div>
<ul class="slides">
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8847.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/HD-Musical-Instruments-Guitar-Wallpaper.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8607.jpg" alt="Free Loves"></li>
<li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
</ul>
</div>
<div class="music">
<iframe width="100%" height="166px" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F210643109&auto_play=false&show_artwork=true&color=ff7700" class="music-player"></iframe>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".nav ul li").children("ul").hide(); //hides the lists when documents loads
$(".nav ul li").hover(
function(){//onmouseover
$(this).children("ul").delay(450).slideDown(200);
},
function(){//onmouseout
$(this).children("ul").slideUp(200);
});
//cache DOM
var $slider = $('.slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.li');
var $slideImg = $slides.find('img');
var $toggleLeft = $('#toggle-left');
var $toggleRight = $('#toggle-right');
var $pauseBtn = $('#pause-btn');
var $playBtn = $('#play-btn');
//configuration
var width = $slider.width();
var animationSpeed = 1500;
var pause = 9000;
var currentSlide = 1;
var interval;
$slideContainer.css('width', width * $slides.length);
$slideImg.css('width', width);
$pauseBtn.click(function(){stopSlider();$pauseBtn.toggle();$playBtn.toggle();});
$playBtn.click(function(){startSlider();$playBtn.toggle();$pauseBtn.toggle();});
$toggleLeft.click(function(){
stopSlider();
if (currentSlide === 1) {
currentSlide = $slides.length;
$slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
currentSlide--;
});
} else {
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
currentSlide--;
});
}
startSlider();
});
$toggleRight.click(function(){
stopSlider();
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
startSlider();
});
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
startSlider();
});
</script>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>
CSS：
body {
margin: 0;
padding: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 16px;
background-color: #000;
}
body, html {
margin: 0;
height: 100%;
width: 100%;
}
.nav.smaller {
width: 100%;
padding-bottom: 5px;
padding-top: 5px;
height: 30px;
}
.nav-wrapper {
width: 100%;
margin: 0;
text-align: left;
}
.nav {
background-color: rgba(34,34,34,0.5);
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
z-index: 2;
width: 100%;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
margin-right: 0px;
}
.nav ul li a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
.nav ul li a:hover {
color: white;
text-decoration: none;
transition: color 0.2s ease-in;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li img.arrow {
vertical-align: middle;
padding-left: 5px;
width: 17%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li img.arrow3 {
vertical-align: middle;
padding-left: 5px;
width: 24%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow3 {
vertical-align: middle;
padding-left: 5px;
width: 24%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow4 {
vertical-align: middle;
padding-left: 5px;
width: 12%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li img.arrow4 {
vertical-align: middle;
padding-left: 5px;
width: 12%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li ul li:hover img.arrow2 {
vertical-align: middle;
padding-left: 5px;
width: 7%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul li ul li img.arrow2 {
vertical-align: middle;
padding-left: 5px;
width: 7%;
transform: rotate(270deg);
transition-duration: 0.5s;
}
.nav ul li:hover img.arrow {
vertical-align: middle;
padding-left: 5px;
width: 17%;
transform: rotate(360deg);
transition-duration: 0.5s;
}
.nav ul ul {
display: none;
position: absolute;
background-color: #222;
border: 5px solid #222;
min-width: 100px;
}
.nav ul ul li {
display: block;
}
.nav ul ul li a,visited {
color: #ccc;
}
.nav ul ul li a:hover {
color: white;
transition: color 0.2s ease-in;
}
.nav ul li ul li.submenu-item52 ul {
min-width: 350px;
}
.nav ul ul li.submenu-item2 ul {
left: 147px;
top: 50px;
min-width: 250px;
}
.nav ul ul li.submenu-item50 ul {
left: 150px;
top: 50px;
min-width: 250px;
}
.nav ul ul li.submenu-item62 ul {
left: 147px;
top: 100px;
min-width: 250px;
}
.nav ul ul li.submenu-item51 ul {
left: 150px;
top: 100px;
min-width: 250px;
}
.nav ul ul li.submenu-item52 ul {
left: 150px;
top: 252px;
}
.nav ul ul li.submenu-item53 ul {
left: 150px;
top: 303px;
min-width: 250px;
}
.nav ul ul li.submenu-item54 ul {
left: 190px;
top: -1px;
min-width: 350px;
}
.nav ul ul li.submenu-item55 ul {
left: 150px;
top: 151px;
min-width: 345px;
}
.nav ul ul li.submenu-item60 ul {
left: 152px;
top: 50px;
}
.nav ul ul li.submenu-item61 ul {
left: 150px;
top: -1px;
}
.nav ul ul li.submenu-item70 ul {
left: 189px;
top: 50px;
min-width: 350px;
}
.nav ul ul li.submenu-item71 ul {
left: 189px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item72 ul {
left: 140px;
top: -1px;
min-width: 350px;
}
.nav ul ul li.submenu-item73 ul {
left: 150px;
top: 50px;
min-width: 345px;
}
.nav ul ul li.submenu-item74 ul {
left: 150px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item80 ul {
left: 153px;
top: 100px;
min-width: 350px;
}
.nav ul ul li.submenu-item81 ul {
left: 153px;
top: 151px;
min-width: 350px;
}
.menu-code {
max-width: 200px;
min-width: 150px;
}
.menu-code ul li {
max-width: 300px;
min-width: 250px;
}
.logo {
width: 75%;
height: 75%;
vertical-align: middle;
margin-left: 100px;
}
.nav ul li ul {
border-top: 1px solid #D4941F;
}
ul li ul li {
border-bottom: 1px solid #111;
}
ul li ul {
border-right: 5px solid #111;
}
.slider {
overflow: hidden;
position: relative;
}
.slides, .slide {
list-style: none;
margin: 0;
padding: 0;
}
.slides img {
margin: auto;
width: 100%;
height: 971px;
-webkit-filter: brightness(1);
filter: brightness(1);
}
.slide {
float: left;
}
.slider .toggles {
color: #000;
height: 48px;
margin: auto;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
transition: all .3s linear;
width: 48px;
z-index: 3;
}
.slider .toggles:hover {
cursor: pointer;
}
.slider:hover .toggles {
opacity: 1;
}
.slider .toggles i:before {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.slider #toggle-right i:before, #slider #toggle-left i:before {
height: 20px;
width: 18px;
}
#toggle-right {
right: 0;
margin-right: 100px;
margin-bottom: 550px;
}
#toggle-left {
left: 0;
margin-bottom: 550px;
margin-left: 75px;
}
#left-arrow {
transform: rotate(180deg);
}
.toggle-arrow {
width: 100px;
height: 180px;
opacity: 0.6;
}
.music {
position: relative;
}
答案 0 :(得分：0)
滑块上的overflow:hidden似乎导致您的音乐播放器无法显示。我将其删除，滑块按预期工作，并显示音乐播放器。尝试修改您的CSS看起来像这样（不确定您是否希望音乐播放器位于屏幕底部，但可以根据需要定位）：
.slider {
position: relative;
}
.music {
position: fixed;
bottom: 0;
width: 100%;
}