Question

我尝试创建一个简单的导航栏，在该导航栏下可以使用欢迎文本作为标题。但导航栏正在掩盖标题。我尝试通过修复边距来解决问题。但通过这样做，标题也随着导航栏一起移动。那么我应该怎么做才能使导航栏没有遮盖标题并保持固定位置。

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.welcome {
  height: 100px;
  margin: px; /* ? */
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0 25%;
  border-bottom: 2px solid white;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}

<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">

<div class="nav">
  <ul>
    <li><a href="#me">About Me</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="#find">Find Us</a></li>
  </ul>
  <div class="search">
    <input type="text" placeholder="Search">
    <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
  </div>
</div>

<div class="welcome">
  <h1>Welcome to My Travel Blog</h1>
</div>

Answer 1

发生了什么事？

在任何元素上声明position: fixed时，您也将其从自然文档流程中取出。

想象一碗麦片，当你拿一个装满水果圈的勺子时，之前被水果圈占据的空间现在被它周围的水果圈填满，好像它们从未在那里开始，但它们他们就在上面。

如何解决

您需要考虑他们在DOM（文档对象模型）中不再占用的空间。

这通常通过使用margin或padding属性来抵消固定元素的高度来完成 - 这一点更合适。在你的情况下，要么会工作。 margin之前没有出现预期行为的唯一原因是由于top元素（fixed）上没有声明任何.nav属性，例如：

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
  top: 0; /* for good measure */
}

然后，您可以在适用的元素（在本例中为margin）声明相应的.welcome属性，例如：

.welcome {
  height: 100px;
  margin-top: 60px;
}

代码段示范：

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.welcome {
  height: 100px;
  margin-top: 60px;
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0px 25%;
  border-bottom: 2px solid white;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
  top: 0; /* for good measure */
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}

<head>
  <meta charset="UTF-8">
  <title>My Travel Blog</title>
  <link rel="stylesheet" href="home.css">
  <link href="https://fonts.googleapis.com/css?
    family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
    awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="nav">
    <ul>
      <li><a href="#me">About Me</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
      <input type="text" placeholder="Search">

      <a href="https://google.com"><i class="fa fa-search" style="font-
        size:30px;"></i></a>
    </div>
  </div>
  <div class="welcome">
    <h1>Welcome to My Travel Blog</h1>
  </div>
</body>

Answer 2

您忘了在margin课程中添加welcome。此外，top:0到固定位置.nav也会丢失。

这是工作解决方案

＆＃13;

body {
margin: 0;
padding: 0;
background: #2E4053;
color: white;
font-family: 'Raleway', sans-serif;
}

.welcome {
height: 100px;
margin: 70px 0 0 0;
}

.welcome h1 {
text-align: center;
font-family: 'Berkshire Swash', cursive;
color: white;
padding: 26px;
margin: 0px 25%;
border-bottom: 2px solid white;
}

.nav {
height: 60px;
width: 100%;
background-color: lawngreen;
position: fixed;
top: 0;
}

.search {
float: right;
margin-top: -52px;
margin-right: 35px;
}

input {
height: 20px;
border-radius: 7px;
}

.nav ul {
list-style: none;
text-decoration: none;
}

.nav ul li a {
text-decoration: none;
}

.nav ul li {
display: inline-block;
padding: 0px 20px;
font-size: 25px;
color: black;
margin: 3px 50px;
font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
text-decoration: line-through;
color: blue;
transition: 0.5s;
}

.search a i:hover {
color: white;
font-size: 33px;
}

＆＃13;

<head>
  <meta charset="UTF-8">
  <title>My Travel Blog</title>
  <link rel="stylesheet" href="home.css">
  <link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="nav">
    <ul>
      <li><a href="#me">About Me</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
      <input type="text" placeholder="Search">

      <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
    </div>
  </div>
  <div class="welcome">
    <h1>Welcome to My Travel Blog</h1>
  </div>
</body>

＆＃13;

Answer 3

body {
  margin: 0;
  padding: 0;
  background: #2E4053;
  color: white;
  font-family: 'Raleway', sans-serif;
}

.nav {
  height: 60px;
  width: 100%;
  background-color: lawngreen;
  position: fixed;
}

.search {
  float: right;
  margin-top: -52px;
  margin-right: 35px;
}

input {
  height: 20px;
  border-radius: 7px;
}

.nav ul {
  list-style: none;
  text-decoration: none;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li {
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  color: black;
  margin: 3px 50px;
  font-family: 'Boogaloo', cursive;
}

.nav ul li a:hover {
  text-decoration: line-through;
  color: blue;
  transition: 0.5s;
}

.search a i:hover {
  color: white;
  font-size: 33px;
}

.welcome {
  height: 100px;
  position:relative;
  top: 7%;
}

.welcome h1 {
  text-align: center;
  font-family: 'Berkshire Swash', cursive;
  color: white;
  padding: 26px;
  margin: 0px 25%;
  border-bottom: 2px solid white;
}

<div class="nav">
    <ul>
        <li><a href="#me">About Me</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#find">Find Us</a></li>
    </ul>
    <div class="search">
        <input type="text" placeholder="Search">

        <a href="https://google.com"><i class="fa fa-search" style="font-
    size:30px;"></i></a>
    </div>
    </div>
    <div class="welcome">
      <h1>Welcome to My Travel Blog</h1>
    </div>

添加位置：相对;最高：7％;到.welcome div。

我的导航栏正在掩盖标题

3 个答案: