HTML

Question

我的主要目标是创建一个在婚礼现场播放/暂停歌曲的btn。我让它在桌面视图端口上工作，但不在手机上。

注意最右边的播放btn，当点击它时，它会播放歌曲，图标会切换到暂停，就像这样

到目前为止一切都那么好，一切都很好。

这就是问题所在，这就是400px上的样子

我看到了，但是，它们根本不可点击。

我试图检查它，这就是我所看到的。

我以为我遇到了z-index的问题，我试图给我的btn一个，但它仍然没有用。

我现在有点卡住了，请随时给我任何建议。

HTML

  <!--Header start -->
   <header>
    <!--menu start-->
    <div class="menu">
      <div class="navbar-wrapper" id="navbar">

        {{-- Music --}} -------------------------------------------------
        <div class="pull-right btn-music">
          <a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
          <a class="play_audio_btn"><i class="fa fa-play"></i></a>
        </div>
        {{-- Music --}} -------------------------------------------------

        <div class="container">
          <!--Logo -->
          <div class="logo">
            <img id="logo" src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
          </div>
          <div class="logo_phone hidden">
            <img src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
          </div>
          <div class="navwrapper">
            <div class="navbar navbar-inverse navbar-static-top">
              <div class="container">
                <div class="navArea">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                  </div>
                  <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" id="navigation">
                      <li class="menuItem" id="home"><a href="#wrapper">Home</a></li>
                      <li class="menuItem"><a href="#when">Count Down</a></li>
                      <li class="menuItem"><a href="#theCouple">Couple</a></li>
                      <li class="menuItem"><a href="#eventsSchedule">Events</a></li>
                      <li class="menuItem"><a href="#photoAlbum">Gallery</a></li>
                      <li class="menuItem"><a href="#theBlog">Accommodation</a></li>
                      <li class="menuItem"><a href="#rsvp">RSVP</a></li>
                    </ul>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Navbar -->
        </div>
      </div>
    </div>
    <!--menu end-->

    <!--video header start-->
    <div class="banner  row" id="banner">
      <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 noPadd slides-container" style="height:100%">
        <!--background slide show start-->
        <div class="slide into_firefly">

          <!--header text1 start-->
          <div class="container hedaer-inner ">
            <div class=" bannerText clearfix ">
             <h1>Long & Roth</h1>
             <h4>WE ARE GETTING MARRIED</h4>

             <p class="ruler"><span></span>
               <a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
               <a class="play_audio_btn"><i class="fa fa-play"></i></a>

               <span></span></p>

               <h4 class="date long">July 26th, 2016</h4>
               <h4 class="date short">-07.26.2016-</h4>
             </div>
             <p class="downArrow"><a href="#when"><i class="fa fa-chevron-down"></i></a></p>
           </div>
           <!--header text end-->
           <img src="/img/love/main/edit/retina.jpg" alt="Main Image">
        </div>    
        <!--background slide show end-->
      </div>
    </div>
    <!--banner end-->
  </header>
  <!--Header end -->

Answer 1

将您已将徽标设置为z-index: 9999

的部分移除

然后将此添加到您的css

.navbar-header button{
    float:right;
}

Answer 2

这是一个z索引问题，但z-index很棘手，只有在元素的位置不是静态（默认值）时才有效。

{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music" style="position:relative; z-index:99">
    ...
</div>
{{-- Music --}} -------------------------------------------------

<div class="container" style="position:relative; z-index:98">
    ...
</div>

（为了清晰起见，我将样式设为内联）

可能有其他方法可以解决这个问题，但这是最快的。

Answer 3

拉出.navbar-wrapper之外的按钮并将其作为.menu下的第一个元素

那会起作用：）

如何在页面右上角放置一个按钮？

HTML

3 个答案: