文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >页面内容重叠导航栏

问页面内容重叠导航栏
EN

Stack Overflow用户
提问于 2018-06-06 06:23:38
回答 3查看 5K关注 0票数 2

我有一些问题与我的导航卡重叠我的导航栏。我确保我的所有位置都不是绝对的，并且z索引得到了适当的处理，但我仍然会遇到同样的问题。在身体上做填充也没有给我想要的结果。这里有一些前后的图片。

​

​

​

​

​

代码语言：javascript
复制
#top {
  top: 0;
  position: fixed;
  z-index: 1;
}

.topbar {
  height: 90px;
  background-color: #24414e;
  border-left: 2px solid #24414e;
  border-right: 2px solid #24414e;
  border-top: 2px solid #24414e;
  border-bottom: 2px solid #24414e;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  animation-name: greeting;
  animation-duration: 8s;
  animation-delay: 1s;
}

@keyframes greeting {
  0% {
    background: url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
    background-size: 100% 100%;
  }
  60% {
    opacity: 1;
  }
}


/*
    .topbar:hover{
    	background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
    	background-size: 100% 100%;
    }
    */

.logo {
  transform: translateY(50%);
  font-family: "Dancing Script";
  color: #ffffff;
}

.holder {
  width: 5%;
  height: 80%;
  margin-right: 30px;
  margin-top: 10px;
}

.out {
  margin-top: 46px;
  color: #ffffff;
  margin-right: 0;
}

.out:hover {
  text-decoration: underline;
}

.menu {
  height: 15%;
  margin-top: 0px;
  background-color: #f7ce3e;
}


/*
    .iconbar{
    	
    	margin-top: 20px;
    	margin-right: 20px;
    	margin-left:20px;
    	height = 
    	text-align: center;
    	border-left: 2px solid #24414e;
      	border-right: 2px solid #24414e;
      	border-top: 2px solid #24414e;
      	border-bottom: 2px solid #24414e;
    }
    
    */

.icon {
  margin-top: 10px;
  color: #24414e;
  animation-name: iconSlide;
  animation-duration: 1s;
}

.txt {
  font-size: 15px;
  visibility: hidden;
  margin-top: 0px;
  color: #24414e;
}

@keyframes iconSlide {
  0% {
    transform: translateX(600%);
  }
  100% {
    transform: translateX(0);
  }
}

.icon-1:hover~.txt-1 {
  visibility: visible;
}

.icon-2:hover~.txt-2 {
  visibility: visible;
}

.icon-3:hover~.txt-3 {
  visibility: visible;
}

.icon-4:hover~.txt-4 {
  visibility: visible;
}

.icon-5:hover~.txt-5 {
  visibility: visible;
}

.icon-6:hover~.txt-6 {
  visibility: visible;
}

.icon:hover {
  color: #ffffff;
}

.rest {
  height: 100%;
}

.contacts {
  position: relative;
  z-index: -1;
}
代码语言：javascript
复制
<!DOCTYPE html>

<html lang="en">

<!---This is for importing bootstrap and the CSS File--->

<head>
  <title>Dashboard</title>
  <link rel="stylesheet" href="templatestyle.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <!---Nav Bar and Header--->
  <section id="top">

    <!---Header--->
    <div class="container-fluid topbar">
      <h1 class="float-left logo">Example</h1>
      <h5 class="float-right out">log out</h5>
      <img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>

    </div>

    <!---Nav Bar--->
    <div class="container-fluid menu" id="openMenu">
      <div class="row">
        <div class="col-2 text-center">
          <i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
          <h5 class="txt txt-1">Dashboard</h5>
        </div>

        <div class="col-2 text-center">
          <i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
          <h5 class="txt txt-2">Profile</h5>
        </div>

        <div class="col-2 text-center">
          <i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
          <h5 class="txt txt-3">Certificates</h5>
        </div>

        <div class="col-2 text-center">
          <i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
          <h5 class="txt txt-4">Send/Apply</h5>
        </div>

        <div class="col-2 text-center">
          <i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
          <h5 class="txt txt-5">Settings</h5>
        </div>

        <div class="col-2 text-center">
          <i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
          <h5 class="txt txt-6">Messages</h5>
        </div>

      </div>
    </div>

  </section>

  <section class="rest container-fluid">

    <h2 class="text-center"><u>Dashboard</u></h2>

    <!---Contacts--->
    <h4>Online contacts:</h4>
    <div class="row contacts">


      <div class="col-sm-6 col-md-4 col-lg-3">


        <div class="card border-success">
          <div class="card-header">Person 1</div>
          <div class="card-body">
            <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
          </div>
          <div class="card-footer">
            <button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
          </div>
        </div>

      </div>

      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border-success">
          <div class="card-header">Person 2</div>
          <div class="card-body">
            <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
          </div>
          <div class="card-footer">
            <button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border-success">
          <div class="card-header">Person 3</div>
          <div class="card-body">
            <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
          </div>
          <div class="card-footer">
            <button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border-success">
          <div class="card-header">Person 4</div>
          <div class="card-body">
            <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
          </div>
          <div class="card-footer">
            <button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border-success">
          <div class="card-header">Person 5</div>
          <div class="card-body">
            <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
          </div>
          <div class="card-footer">
            <button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border-success">
          <div class="card-header">Person 6</div>
          <div class="card-body">
            <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
          </div>
          <div class="card-footer">
            <button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card border-success">
          <div class="card-header">Person 7</div>
          <div class="card-body">
            <img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
          </div>
          <div class="card-footer">
            <button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
          </div>
        </div>
      </div>

    </div>

  </section>

</body>

</html>

​

html
css
bootstrap-4
EN

回答 3

Stack Overflow用户

发布于 2021-05-18 13:46:37

这是一个简单的修复，只需设置您的头z-index: 2;和您的卡z-index: 1;。

我并没有仔细检查过你的代码，但是将头部设置为一个更高的z-index作为内容肯定可以解决这个问题。

票数 1
EN

Stack Overflow用户

发布于 2018-06-06 13:34:01

答案是您已经将position:fixed赋予了头部(.top)，以便用top:0将其固定在顶部，因此您必须将margin-top赋予它旁边包含类class="rest container-fluid"的部分，否则它将与绝对定位的元素重叠。设置margin:top:159px可以解决这个问题。

请注意，159px在这里是顶部标题的高度。快乐编码:)

票数 0
EN

Stack Overflow用户

发布于 2018-06-06 15:20:46

使用fixed-top类而不是top CSS代码。并为车身添加160px的填充顶部。

​

代码语言：javascript
复制
/*
The headers height is 159.5px
*/

body {
  padding-top: 160px;
}

​

fixed-top会从正常的内容流中删除您使用它的element，因此，该element将覆盖其他内容

要解决此问题，需要将等于或大于fixed-top元素高度的main内容下推。可以通过将body的padding-top设置为等于或大于fixed-top element's height来执行此操作。例如，如果fixed-top element's height为72px，则body的padding-top至少应为72px。如果您愿意，可以使用relative单位：padding-top: 4.5rem;而不是padding-top: 72px;。

​

代码语言：javascript
复制
body {
  padding-top: 72px;
}
代码语言：javascript
复制
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="fixed-top bg-light">
  <div>
    <noscript>
      <h1 style="color:#FF0000;">
          This reportFile will not be navigable without Javascript, please enabled Javascript
      </h1>
  </noscript>
    <img srcset="style/songkongheader.png 400w,style/songkongheader-medium.png 200w,style/songkongheader-small.png 100w," sizes="(max-width:800px) 200px,(max-width:600px) 100px,400px" class="mb-2">
  </div>
  <header>
    <h2 class="subheading" title="Start Fixing Songs">
      <a class="mx-2">
          Fix Songs
      </a>
    </h2>
  </header>
</div>
<main class="container-fluid bg-primary bd-">
  <div class="row">
    <div class="col py-5">Hello</div>
  </div>
</main>

​

这就是bootstrap-3和bootstrap-4所做的。我建议你自己去检查一下。

你可能会发现这两个链接很有用。

A codepen of your work

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50709761

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档