堆棧內存溢出
  簡體   English   中英

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

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

 原文  2018-02-05 15:27:32  8   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