当以各种站点提供的方法攻击问题时,我总是遇到相同的问题。

How can i set the nav to a z-index of 1000 to appear above all other elements in the site?

我已经尝试过position: absolute & relative' within the fixed div

我需要固定导航,并像引导程序一样扩展,但我需要随时随地显示整个导航。

导航

<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>




我希望它的主体出现在导航栏的下方,但在铬合金中出现在导航栏的上方

<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;
}

最佳答案

我使用带有headroom.js的引导Navbar使其上下移动。我必须在css中为我使用的样式设置z-index .navbar-fixed-bottom,以这种方式也适用于顶部,这实现了固定和z-index,无需创建单独的样式,您的可能性很大被覆盖时,您可以签入chrome开发工具,在您的引导css文件中查找.navbar-fixed-top,.navbar-fixed-bottom,然后添加z-index:1030;我无法想象为什么我使用1030,只是需要一个很大的余量,而不仅仅是页面的元素总数。

.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>

关于html - Z-index问题仅在Chrome中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24297134/

10-12 00:04
查看更多