个人中心
gpt4 book ai didi

javascript - Bootstrap 4 - 位置 : sticky; and positon: fixed; 的碰撞

转载 作者：行者123 更新时间：2023-11-27 23:06:38 24 4
gpt4 key购买 nike

我有两个重叠的全宽对象(菜单和搜索+登录表单)每次我想更改 z-index 时，只有其中一个可以正常工作(可点击/具有工作链接)。我不能将它们包含在一起，因为那样看起来不太好。我正在尝试使其中一个固定，第二个固定(在 Logo 下方)。我怎样才能使它们同时工作而不重叠？

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

最佳答案

"Every time I want to change z-index, just one of them works fine (is clickable/with working links)."

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

我的解决方案是将导航栏放在容器中，然后添加类 container从 Bootstrap 到它的中心。然后我将在其上使用自定义 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 " 之间.

关于javascript - Bootstrap 4 - 位置 : sticky; and positon: fixed; 的碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48625888/

24 4 0
文章推荐： html - 使用 bootstrap 4 在小屏幕 View 中对齐切换按钮(humberger 图标)
文章推荐： javascript - Chrome扩展程序内容脚本: click() and async results
文章推荐： jquery - 使用Typescript(Angular 8)一个接一个地旋转木马
文章推荐： c++ - 继承和返回实例的循环依赖问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com