Question

我刚刚开始建立自己的小网站。已经解决了一些问题，但现在我被困住了。

我的标头工作正常（固定），但下面的div不在其下面浮动。当我给div(#box)留有一个空白时，标题也会移动。我的盒子只是一个可视化视图，让我看到正在发生的事情。相对或绝对位置，我不太确定有什么区别，只需将div放在前台即可。

另外，当我在野生动物园中浏览网页时，标题的高度为0。它不应该随内容缩放吗？

很抱歉有很多问题。

所以：我该如何区分这两件事？

非常感谢！

body, html{
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
}

header {
    position: fixed;
    width: 100%;

}

.container {
    width: 100%;
    margin: auto;
    font-family: 'Open Sans', sans-serif;
    
    position: fixed;

    padding-top: 20px;
}




nav ul {
    margin: 0;
    padding-left: 10%;
    list-style: none;

}

nav li {
    display: inline-block;
    margin-left: 35px;
    padding-top: 25px;
    padding-bottom: 15px;
}

nav a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
}

nav a:hover {
    color: rgba(0, 0, 0, 0.250);
}



#marclogo {
    display: block;   
    margin: auto;
    width: 30%;
}





#photo:after{
    content: 'photo';
}
#photo:hover:after{
    content: 'video';
}
#music:after{
    content: 'music';
}
#music:hover:after{
    content: 'commercial';
}
#video:after{
    content: 'video';
}
#video:hover:after{
    content: 'photo';
}
#commercial:after{
    content: 'commercial';
}
#commercial:hover:after{
    content: 'music';
}






#box {
   
    height: 2000px;
    background: #33ee5b;
    margin: auto;
    width: 50%;
    

}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Schroellkamp</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:900|Open+Sans:300" rel="stylesheet"> 
</head>


<body>

    <header>
        <div class="container">
            <nav>
                <ul>
                    <li><a id="photo" href="#"></a></li>
                    <li><a id="music" href="#"></a></li>
                    <li><a id="video" href="#"></a></li>
                    <li><a id="commercial" href="#"></a></li>
                </ul>
            </nav>
            <img id="marclogo" src="img/MarcS.png" alt="logo">
        </div>
    </header>

    



    <div id="box"></div>







    <footer>
    </footer>


</body>


</html>

Answer 1

将top:0;和background:#fff;设置为header，将margin-top设置为#box也会从position:fixed;中删除.container。这是更新的小提琴：

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  background: #fff;
}

.container {
  width: 100%;
  margin: auto;
  font-family: 'Open Sans', sans-serif;
  padding-top: 20px;
}

nav ul {
  margin: 0;
  padding-left: 10%;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 35px;
  padding-top: 25px;
  padding-bottom: 15px;
}

nav a {
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
}

nav a:hover {
  color: rgba(0, 0, 0, 0.250);
}

#marclogo {
  display: block;
  margin: auto;
  width: 30%;
}

#photo:after {
  content: 'photo';
}

#photo:hover:after {
  content: 'video';
}

#music:after {
  content: 'music';
}

#music:hover:after {
  content: 'commercial';
}

#video:after {
  content: 'video';
}

#video:hover:after {
  content: 'photo';
}

#commercial:after {
  content: 'commercial';
}

#commercial:hover:after {
  content: 'music';
}

#box {
  height: 2000px;
  background: #33ee5b;
  margin: auto;
  width: 50%;
  margin-top: 80px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Schroellkamp</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:900|Open+Sans:300" rel="stylesheet">
</head>


<body>

  <header>
    <div class="container">
      <nav>
        <ul>
          <li>
            <a id="photo" href="#"></a>
          </li>
          <li>
            <a id="music" href="#"></a>
          </li>
          <li>
            <a id="video" href="#"></a>
          </li>
          <li>
            <a id="commercial" href="#"></a>
          </li>
        </ul>
      </nav>
      <img id="marclogo" src="img/MarcS.png" alt="logo">
    </div>
  </header>

  <div id="box"></div <footer>
  </footer>


</body>


</html>

当我更改下面的div位置/第一个网站时，标题移动

1 个答案: