堆栈内存溢出
  繁体   English   中英

Bootstrap 4 - 位置冲突：粘性； 和位置：固定；

[英]Bootstrap 4 - Collision of position: sticky; and positon: fixed;

 原文  2018-02-05 15:27:32  0   2    javascript/ jquery/ html/ css/ twitter-bootstrap

问题描述

我有两个重叠的全宽对象（菜单和搜索+登录表单）每次我想更改 z-index 时，只有其中一个可以正常工作（可点击/带有工作链接）。 我不能把它们放在一起，因为那看起来不太好。 我正在尝试使其中一个固定，而第二个具有粘性（在徽标下）。 我怎样才能让它们都工作而不重叠？ 

 /*ALL*/ html, body { width: 100% !important; } h1 { font-size: 120pt !important; font-family: 'Cinzel Decorative', cursive !important; } p { font-size: 13pt !important; font-family: 'Cinzel', serif; } /*.white {color: white !important;} .black {color: white !important;}*/ /* NavBar */ nav { font-size: 18pt; font-family: 'Cinzel', serif; } .nav-link { color: #fff !important; margin: 0 30% 0 30%; padding: 0 !important; display: inline-block; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } nav, .logo { z-index: 1; } .nav-link:hover { text-decoration: none; border-bottom: 2px solid white; margin-bottom: -2px; } .nav-link:hover, .nav-link:visited { color: white !important; } /* Header */ .logo { display: inline-block; } /* Sections */ section { color: white; height: 100.2vh; min-height: 900px; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; } .first_section { margin-top: -256px; padding-top: 256px; } .header-positon { padding-top: 10%; } .replic-positon { padding-top: 30%; } .unic-positon { padding-top: 5%; } .section_text { padding: 20px; margin-top: -55px; } .red { background: rgba(232, 0, 40, 0.3); } .green { background: rgba(32, 62, 85, 0.3); } .purple { background: rgba(43, 0, 81, 0.3); } .blue { background: rgba(0, 128, 196, 0.3); } /* Expandable Search */ #search input[type=search] { width: 20px; padding-left: 8px; color: transparent; cursor: pointer; } #search input[type=search]:hover { background-color: white; } #search input[type=search]:focus { width: 130px; padding-left: 32px; color: black; background-color: white; cursor: auto; } #search input:-moz-placeholder { color: transparent; } #search input::-webkit-input-placeholder { color: transparent; } input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } input[type=search] { background: transparent url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; border: none; padding: 6px 8px 6px 32px; width: 55px; -webkit-border-radius: 8em; -moz-border-radius: 8em; border-radius: 8em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 130px; background-color: black; } input:-moz-placeholder { color: #999; } input::-webkit-input-placeholder { color: #999; } .user_search { z-index: 2; }
 <!DOCTYPE html> <html lang ="cs"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="stylesheet/stylesheet.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <title>Test</title> </head> <body data-spy="scroll" data-target="#navbar-example"> <main class="container-fluid p-0 m-0" id="home"> <div class="user_search fixed-top mr-5 mt-1"> <div class="float-right p-2"> <form id="search"> <!-- <span class="fa fa-search form-control-feedback"></span>--> <input type="search" placeholder="Search"> <a class="" href="#home">Home</a> </form> </div> </div> <img class="logo d-block img-fluid mx-auto p-0 m-0" src="http://brandmark.io/logo-rank/random/pepsi.png" width="200" alt="Logo" /> <nav class="navbar navbar-expand-lg sticky-top" id="navbar-example" data-spy="affix" data-offset-top="90"> <button class="navbar-toggler" type="button" data-toggle="collapse" role="tablist" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span> </button> <div class="collapse navbar-collapse" id="Toogle"> <ul class="navbar-nav mt-2 mt-lg-0 mx-auto "> <li class="nav-item "> <a class="nav-link" href="#replic">Libero</a> </li> <li class="nav-item "> <a class="nav-link" href="#replic">Libero</a> </li> <li class="nav-item "> <a class="nav-link" href="#replic">Libero</a> </li> <li class="nav-item "> <a class="nav-link" href="#replic">Libero</a> </li> </ul> </div> </nav> <section class="pr-5 pl-5 first_section " style="background-image: url( 'https://picsum.photos/1920/1080/?random'); "> <div class="row header-positon no-gutters "> <div class="col-xs-12 col-md-4 offset-md-1 "> <h1>Us</h1> <p class="section_text green ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p> </div> </div> </section> <section style="background-image: url( 'https://picsum.photos/1920/1080/?random');" id="replic"> <div class="row replic-positon no-gutters black"> <div class="col-xs-12 col-md-4 offset-md-7 "> <h1>Replic</h1> <p class="section_text red ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p> </div> </div> </section> </main> </body>

2 个解决方案

解决方案1
 1 已采纳  2018-02-05 16:38:51

“每次我想更改 z-index 时，只有其中一个可以正常工作（可点击/带有工作链接）。”

这是因为这两个元素（导航栏和搜索栏）都具有全屏宽度，并且在其中一个元素上使用 z-index 最终会阻止另一个元素的可点击性/交互性。

我的解决方案是将导航栏放在一个容器中，然后从 Bootstrap 添加类container以使其居中。 然后我将在其上使用自定义 z-index 以确保它位于搜索栏上方。 根据Bootstrap 4 docs ，带有sticky-*类的元素的 z-index 是1020而对于fixed-*是1030 。 但是因为我们的目的是将sticky元素（导航栏）放在fixed元素（搜索栏）上，所以我们需要使用 z-index > 1030 。

反正...

改变这部分

<nav class="navbar navbar-expand-lg sticky-top" id="navbar-example" data-spy="affix" data-offset-top="90">
      <button class="navbar-toggler" type="button" data-toggle="collapse"  role="tablist " data-target="#Toogle " aria-controls="Toogle " aria-expanded="false " aria-label="Toggle navigation ">
                        <span class="navbar-toggler-icon "><i class="fa fa-bars mx-auto " aria-hidden="true "></i></span>
                    </button>
                    <div class="collapse navbar-collapse " id="Toogle ">
                        <ul class="navbar-nav mt-2 mt-lg-0 mx-auto ">
                            <li class="nav-item ">
                                <a class="nav-link " href="#replic ">Libero</a>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link " href="#replic ">Libero</a>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link " href="#replic ">Libero</a>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link " href="#replic ">Libero</a>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link " href="#replic ">Libero</a>
                            </li>
                        </ul>
                    </div>
                </nav>

对此

<div class="container sticky-top">
    <nav class="navbar navbar-expand-lg" id="navbar-example" data-spy="affix" data-offset-top="90">
      <button class="navbar-toggler" type="button" data-toggle="collapse" role="tablist " data-target="#Toogle " aria-controls="Toogle " aria-expanded="false " aria-label="Toggle navigation ">
        <span class="navbar-toggler-icon "><i class="fa fa-bars mx-auto " aria-hidden="true "></i></span>
      </button>
      <div class="collapse navbar-collapse " id="Toogle ">
        <ul class="navbar-nav mt-2 mt-lg-0 mx-auto ">
          <li class="nav-item ">
            <a class="nav-link " href="#home ">Libero</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="#replic ">Libero</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="#unic ">Libero</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="#install ">Libero</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="#contacs ">Libero</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

那你就不需要这个了

.user_search {
  z-index: 2;
}

而是使用这个

.container {
  z-index: 2000 !important;  //`1031 !important` also works perfectly fine
}

另外，很重要地指出，你有一个错字在这一行<button class="navbar-toggler" ......因为有一个额外的"之间的"collapse" " role="tablist " 。

解决方案2
 1  2018-02-05 17:10:26

尝试通过将您的Hamburger Menu和Search放在一个nav类中来简化您的代码。

通过这种方式，您将不需要覆盖任何自定义的 Bootstrap CSS，这在未来的任何时候都可能发生冲突。 

 /*ALL*/ html, body { width: 100% !important; } h1 { font-size: 120pt !important; font-family: 'Cinzel Decorative', cursive !important; } p { font-size: 13pt !important; font-family: 'Cinzel', serif; } /*.white {color: white !important;} .black {color: white !important;}*/ /* NavBar */ nav { font-size: 18pt; font-family: 'Cinzel', serif; } .nav-link { color: #fff !important; padding: 0 !important; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } nav, .logo { z-index: 1; } .nav-link:hover { text-decoration: none; border-bottom: 2px solid white; margin-bottom: -2px; } .nav-link:hover, .nav-link:visited { color: white !important; } /* Header */ .logo { display: inline-block; } /* Sections */ section { color: white; height: 100.2vh; min-height: 900px; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; } .first_section { margin-top: -256px; padding-top: 256px; } .header-positon { padding-top: 10%; } .replic-positon { padding-top: 30%; } .unic-positon { padding-top: 5%; } .section_text { padding: 20px; margin-top: -55px; } .red { background: rgba(232, 0, 40, 0.3); } .green { background: rgba(32, 62, 85, 0.3); } .purple { background: rgba(43, 0, 81, 0.3); } .blue { background: rgba(0, 128, 196, 0.3); } /* Expandable Search */ #search input[type=search] { width: 20px; padding-left: 8px; color: transparent; cursor: pointer; } #search input[type=search]:hover { background-color: white; } #search input[type=search]:focus { width: 130px; padding-left: 32px; color: black; background-color: white; cursor: auto; } #search input:-moz-placeholder { color: transparent; } #search input::-webkit-input-placeholder { color: transparent; } input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } input[type=search] { background: transparent url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; border: none; padding: 6px 8px 6px 32px; width: 55px; -webkit-border-radius: 8em; -moz-border-radius: 8em; border-radius: 8em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 130px; background-color: black; } input:-moz-placeholder { color: #999; } input::-webkit-input-placeholder { color: #999; } .user_search { z-index: 2; } a.dropdown-toggle::after { display: none; }
 <link rel="stylesheet" href="stylesheet/stylesheet.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <body> <main class="container-fluid p-0 m-0" id="home"> <img class="logo d-block img-fluid mx-auto p-0 m-0" src="http://brandmark.io/logo-rank/random/pepsi.png" width="200px" alt="Logo" /> <!--THESE ARE THE CHANGES--> <ul class="nav navbar fixed-top"> <!--DROPDOWN--> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </li> <!--SEARCH, it's pulled to right--> <form id="search" class="form-inline my-2 my-lg-0" style="position:absolute; right:10px;"> <!-- <span class="fa fa-search form-control-feedback"></span>--> <input type="search" placeholder="Search"> <a class="" href="#home">Home</a> </form> </ul> <section class="pr-5 pl-5 first_section " style="background-image: url( 'https://picsum.photos/1920/1080/?random'); "> <div class="row header-positon no-gutters "> <div class="col-xs-12 col-md-4 offset-md-1 "> <h1>Us</h1> <p class="section_text green ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p> </div> </div> </section> <section style="background-image: url( 'https://picsum.photos/1920/1080/?random'); " id="replic "> <div class="row replic-positon no-gutters black "> <div class="col-xs-12 col-md-4 offset-md-7 "> <h1>Replic</h1> <p class="section_text red ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p> </div> </div> </section> </main> </body>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 固定位置在粘性导航栏上不起作用 固定的位置不适用于粘性菜单 粘性页眉从顶部滑入固定位置 CSS位置固定不起作用-粘性导航 粘性导航 - 固定 position 时宽度发生变化 在固定 position 中创建粘性 Div 的问题 使标头粘在滚动轴上而没有固定位置？ Bootstrap-滚动时的粘性/固定导航栏 Bootstrap粘性（固定）警报可防止向下滚动 bootstrap 4下拉菜单隐藏后面的位置粘性div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM