当我更改/ First网站下面div的位置时，标题会移动

问题描述 投票：0回答：1

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

我的标题完美（固定）但下面的div不会漂浮在它下面。当我给div(#box)一个边缘顶部时，标题也会移动。我的框只是一个可视化，让我看到正在发生的事情。位置相对或绝对，我不太确定区别是什么，只需将div放在前台。

另外，当我在safari中查看页面时，我的标题高度为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>
html css
1个回答
0
投票

设置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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.