页面内容重叠导航栏

时间：2018-06-05 22:23:38

标签： html css bootstrap-4

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

Before Scrolling up

After Scrolling Up 

<!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>
function Conditional_Block([bool]$Execute,[ScriptBlock]$PipeElement)
{
    if ($Execute) 
        {$ExecutionContext.InvokeCommand.NewScriptBlock("`$(`$Input|$PipeElement)").invoke()}
    else
        {$input}
}

3 个答案:

答案 0 :(得分：0)

答案是您已将position:fixed添加到标题（.top）以使用top:0将其修复到顶部，因此您必须向margin-top提供class="rest container-fluid"它旁边的部分包含类margin:top:159px，否则它将与绝对定位元素重叠。 设置159px可解决此问题。

请注意，此处import {MatDialogModule} from '@angular/material/dialog' @NgModule({ declarations: [ ... ], imports: [ ... MatDialogModule 是顶部标题的高度。快乐的编码：）

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
/*
The headers height is 159.5px
*/

body {
  padding-top: 160px;
}
＆＃13;
＆＃13;
＆＃13;

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

要解决此问题，您需要按下main内容等于或大于fixed-top元素的高度。您可以通过将padding-top的{​​{1}}设置为等于或大于body来实现。例如，如果fixed-top element's height为fixed-top element's height，则正文的填充顶部应至少为72px。如果您愿意，可以使用72px单位：relative代替padding-top: 4.5rem;。

＆＃13;
＆＃13; 
padding-top: 72px;
＆＃13; 
body {
  padding-top: 72px;
}
＆＃13;
＆＃13;
＆＃13;

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

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

A codepen of your work

答案 2 :(得分：0)

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

我并没有真正检查您的代码，而是将标题设置为更高的 z-index，因为内容肯定会修复它。

相关问题
最新问题