Question

我有两个全宽度对象（菜单和搜索+登录表单）重叠每次我想要更改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>

Answer 1

“每次我想改变z-index时，其中一个工作正常（是可点击/有工作链接。“

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

我的解决方案是将导航栏放在容器中，然后从Bootstrap中添加类container以使其居中。然后我会在其上使用自定义z-index以确保它位于搜索栏上方。根据{{3}}，sticky-*类的元素的z-index为1020，而fixed-*的元素的z-index为1030。但是因为我们的目的是将sticky元素（navbar）放在fixed元素（搜索栏）上，我们需要使用z-index＆gt; 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 "。

Answer 2

通过将汉堡菜单和搜索放在一个nav课程中，尝试简化您的代码。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap 4 - 位置碰撞：粘性;和位置：固定;

2 个答案: