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

Question

我的主要目标是创建一个在我的婚礼网站上播放/暂停歌曲的 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-index 问题，但 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 下

这会起作用的:)