Помогите начинающему разобраться с хедером

Question

Не получается самое элементарное, но объясните, почему, если я пишу любой контент после хедера в HTML то он становится выше хедера, будь то картинка или текст.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The PiedPiper</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="normalize.css">
</head>
<body>
  <header>
    <div class="container">
      <div class="logo">
        <a href="#"><img src="img/logo.svg" alt="logo"></a>
      </div>
      <nav>
        <ul>
          <li><a href="#test">The problem</a></li>
          <li>|</li>
          <li><a href="#">PiedPiperCoin</a></li>
          <li>|</li>
          <li><a href="#">The team</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>
</html>

header {
  background-color: #007765;
  position: fixed;
  width: 100%;
  height: 100px;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-right: 8px;
  color: #fff;
  font-size: 24px;
}

nav a {
  text-decoration: none;
  color: #fff;
  font-size: 24px;
}

Answer 1

Проблема в вашем стиле. position: fixed; для header является причиной такого поведения. Он перестает занимать пространство. Лучше всего будет использовать position: sticky и top: 0

Ниже пример, который просто исправляет вашу ошибку (без position: sticky и top: 0):

header {
    background-color: #007765;
    /*position: fixed;*/
    width: 100%;
    height: 100px;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    font-family: sans-serif;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-right: 8px;
    color: #fff;
    font-size: 24px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-size: 24px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The PiedPiper</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
<header>
    <div class="container">
        <div class="logo">
            <a href="#"><img src="img/logo.svg" alt="logo"></a>
        </div>
        <nav>
            <ul>
                <li><a href="#test">The problem</a></li>
                <li>|</li>
                <li><a href="#">PiedPiperCoin</a></li>
                <li>|</li>
                <li><a href="#">The team</a></li>
            </ul>
        </nav>
    </div>
</header>
<div>Heloo</div>
</body>
</html>

Теперь пример с position: sticky и top: 0:

header {
    background-color: #007765;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100px;
}
body {
    display: flex;
    flex-direction: column;
}
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    font-family: sans-serif;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-right: 8px;
    color: #fff;
    font-size: 24px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-size: 24px;
}

.test {
    height: 1000vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The PiedPiper</title>
    <link rel="stylesheet" href="style2.css">
<!--    <link rel="stylesheet" href="normalize.css">-->
</head>
<body>
<header>
    <div class="container">
        <div class="logo">
            <a href="#"><img src="img/logo.svg" alt="logo"></a>
        </div>
        <nav>
            <ul>
                <li><a href="#test">The problem</a></li>
                <li>|</li>
                <li><a href="#">PiedPiperCoin</a></li>
                <li>|</li>
                <li><a href="#">The team</a></li>
            </ul>
        </nav>
    </div>
</header>
<div class="test">Heloo</div>
<div>Heloo</div>
</body>
</html>

БЛОГ НА HUSL

Помогите начинающему разобраться с хедером

Ответы (1 шт):