音乐播放器

音乐播放器

关注
发信
关注(28)粉丝(399)

javascript - 音乐播放器处于固定位置

我的网站上有一个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 &#038; 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 &#8211; Masonry (Right Sidebar)</a></li>
    <li><a href="test/index.html%3Fp=888.html">Blog 3 Columns &#8211; Masonry</a></li>
    <li><a href="test/index.html%3Fp=889.html">Blog 4 Columns &#8211; 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 &#038; icon boxes</a></li>
    <li><a href="test/index.html%3Fp=211.html">Lightbox &#038; 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 &#038; 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&amp;auto_play=false&amp;show_artwork=true&amp;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;
}

最佳答案

滑块上的overflow:hidden似乎导致音乐播放器无法显示。我将其删除，并且滑块按预期工作，并且显示了音乐播放器。尝试将CS​​S修改为如下所示（不确定是否要在屏幕底部放置音乐播放器，但可以根据需要放置它）：

.slider {
  position: relative;
}
.music {
  position: fixed;
  bottom: 0;
  width: 100%;
}

08-28 09:55
Powered by LMLPHP ©2024 音乐播放器 0.026926