html - 我怎样才能简单地在页面右上角放置一个按钮？

Question

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

---

注意最右边的play 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

去掉你把logo设置为z-index: 9999

的部分

然后将其添加到您的 CSS 中

.navbar-header button{
    float:right;
}