html - 仅 chrome 中的 z-index 问题

Question

在使用各种站点提供的方法解决问题时，我总是遇到同样的问题。

问。如何将 nav 设置为 1000 的 z-index 以显示在网站中所有其他元素之上？

我已经在固定的 div 中尝试了 position: absolute & relative'。

我需要固定导航，并像 Bootstrap 一样展开，但我需要整个导航随时显示在其他任何东西之上。

导航

<div id='nav_container' class='fixed_nav'>
    <div id='nav_div' class=''>
        <nav id='navbarnav' class="navbar navbar-default admin_nav_bar" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><img class='brand_image' src='assets/images/logo-1-small.png' alt='' /></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav pills">
                <li class="active home-pill"><a href="#home" id='home_button'>Home</a></li>
                <li class='vids-pill'><a href="#vids">Vids</a></li>
              </ul>
              <!--
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              -->
              <ul class="nav navbar-nav navbar-right pills">
                    <!--
                    <li class='login_button'>
                        <a href='#signin' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Sign in</a>
                    </li>

                    <li class='register_button'>
                        <a href='#register' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Register</a>
                    </li>
                    -->
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">New <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li class="divider"></li>
                        <li><a href="#newvid">Video</a></li>
                        <li><a href="#newpics">Picture</a></li>
                        <li><a href="#newmusic">Music</a></li>
                        <li class="divider"></li>
                      </ul>
                    </li>

                    <li class='user_button admin-pill'>
                        <a href='#admin' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Admin</a>
                    </li>

                    <li class='user_button myaccount-pill'>
                        <a href='#myaccount' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'><? echo $_SESSION['userName']; ?></a>
                    </li>

                    <li class='logout_button'>
                        <a href='http://www.xxxxxxx.co/home/bin/logout/logout.php' type="button" id='logout_button' class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Logout</a>
                    </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    </div>
</div>

---

我希望显示在下方但在 chrome 中显示在导航上方的 Body

<div class='container'>
    <h3>
        New Video
    </h3>
     <hr />


     <div id='new_vid_form' class='' style='position: relative; z-index: 0;'>
        <div class="input-group marg_5">
          <span class="input-group-addon">Article Title</span>
          <input id='new_vid_form_title' type="text" class="form-control" placeholder="Article Title">
          <span class="input-group-addon"> 
            <span id="new_vid_form_title_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
          </span>
        </div>

        <div class="input-group marg_5">
          <span class="input-group-addon">Short Desc.</span>
          <input id="new_vid_form_shortDesc_status" type="text" class="form-control" placeholder="Short Description">
          <span class="input-group-addon"> 
            <span id="new_vid_form_shortDesc_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
          </span>
        </div>

         <hr />

        <div class="input-group marg_5">
          <span class="input-group-addon">Youtube ID</span>
          <input id="new_vid_form_youtubeID_status" type="text" class="form-control" placeholder="Youtube Video ID | watch?v=' this bit ' ">
          <span class="input-group-addon"> 
            <span id="new_vid_form_youtubeID_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
          </span>
        </div>

         <hr /> 
        <textarea id="new_vid_form_longDesc" class="input-large text_area_fw" placeholder='Long Description'></textarea>

        </input>
         <hr />

        <div class="input-group marg_5">
          <span class="input-group-addon">Tags</span>
          <input id="new_vid_form_tags" type="text" class="form-control" placeholder="Tags (No more than 10) seperated by comma">
          <span class="input-group-addon"> 
            <span id="new_vid_form_tags_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
          </span>
        </div>

        <hr />

        <button class='btn btn-default'>Add video</button>

     </div>
</div>

关联的 CSS

.fixed_nav {
    width: 100%;
    position: fixed;
    top:0;
}
#nav_div {
    z-index: 10000;
}

Answer 1

我将 Bootstrap 导航栏与 headroom.js 结合使用，使其上下移动。我必须在 css 中为我使用的样式设置 z-index .navbar-fixed-bottom，这种方式也适用于顶部，这实现了固定和 z-index，无需创建单独的样式，你的可能是被覆盖你可以检查 chrome 开发工具，在你的 bootstrap css 文件中查找和 .navbar-fixed-top，.navbar-fixed-bottom，然后添加 z-index:1030;我无法想象为什么我使用 1030，只是需要一个大的 enuff 来超过页面元素的总数，无论你是什么。

.navbar-fixed-top, .navbar-fixed-bottom {
 position: fixed;
 right: 0;
 left: 0;
 z-index: 1030;
 }

HTML

 <div  class="navbar-fixed-bottom">
        <ul>
            <li>
               ...
            </li>
        </ul>
  </div>