为什么我的 <main></main> 堆叠在我的 <nav></nav> 之上？答案

【问题标题】：Why is my <main></main> stacked on top of my <nav></nav>?为什么我的 <main></main> 堆叠在我的 <nav></nav> 之上？
【发布时间】：2023-03-15 10:20:01
【问题描述】：

您好，我想问一些与（可能）元素定位有关的问题。

所以我已经被这个问题困扰了一段时间。 the 和 the 相互堆叠。是否有有效的解决方法，所以将直接在 ?奇怪的是，它也卡在那里。

这是它的屏幕截图： Screenshot of the page

这是我的 css 和 html sn-p：

@-ms-viewport {
  width: device-width;
}

* {
  box-sizing: border-box;
}


/* FONT */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
body,
html {
  width: 100%;
  height: 100%;
  margin: auto 0;
  /*background-color: #FDE500;*/
  font-family: 'Arimo', sans-serif;
}

ul {
  list-style: none;
}

li {
  padding: 20px;
  margin: 10px;
}

h3 {
  font-family: 'Arimo', sans-serif;
  font-size: 1em;
}

.nav-container li a {
  text-decoration: none;
  color: black;
  font-family: 'Arimo', sans-serif;
  font-weight: 1000;
}


/* NAV */

.zone-nav {
  background-color: #1A1EB0;
  width: 100%;
  display: block;
}

.nav-container li a {
  color: #FDE500;
}

ul.nav-container {
  padding-left: 0;
  margin: 0 auto;
}

.nav-container {
  display: flex;
  flex-flow: row wrap;
  font-size: 1.2em;
  margin: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto 0;
}

@media only screen and (max-width: 600px) {
  .nav-container {
    font-size: 1.3em;
    padding: 0;
    flex-flow: column wrap;
  }
}

.nav-container li a img {
  display: block;
  width: 1.5em;
  margin: 0 auto;
  margin-bottom: -10px;
}

.item-1 {
  margin: 0 auto;
  flex: 1 1 0px;
  text-align: center;
}

li.item-1 {
  padding: 30px;
}


/*.logo {
  margin: auto 0;
}*/

.item-2 {
  margin: auto 0;
  background-color: ;
}

li.item-1.logo img {
  width: 5em;
  display: block;
  margin: 0 auto;
  padding: auto 0;
}

li.item-1.logo {
  margin: auto 0;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  /*    z-index: 1;*/
}


/* MAIN */

.zone-main {
  display: flex;
  flex: 1 0 auto;
  max-width: 100%;
  background: rgb(238, 174, 202);
  background: linear-gradient(90deg, rgba(238, 174, 202, 1) 38%, rgba(148, 187, 233, 1) 100%);
}

.wrap-main {
  flex: 1 1 auto;
  max-width: 100%;
  position: relative;
}


/* FOOTER */

.zone-footer {
  background-color: #FDE500;
}

.footer-container {
  display: flex;
  flex-flow: row wrap;
  font-size: 16px;
  color: #1A1EB0;
  font-weight: 1000;
  margin: 0;
  justify-content: safe center;
  align-items: center;
  margin: auto 0;
  padding: 0 20px 0 20px;
}

.footer-item {
  margin: 0;
  padding: 10px;
  text-align: center;
}

li.footer-item-buffer {
  flex-grow: 1;
}

.push {
  margin-left: auto;
  padding: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home | P.Y.G. Headquarters</title>
  <link rel="stylesheet" type="text/css" href="style-base.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <nav class="zone-nav sticky">
    <ul class="nav-container">
      <li class="item-1">
        <a href="#"><img src="assets/img/join.png" alt="ICON I"><br>JOIN</a>
      </li>
      <li class="item-1">
        <a href="#"><img src="assets/img/home.png" alt="ICON II"><br>HOME</a>
      </li>
      <li class="item-1">
        <a href="#"><img src="assets/img/lineups.png" alt="ICON I"><br>LINEUPS</a>
      </li>
      <li class="item-1 logo"><img src="assets/img/pyg.png" alt="ICON I"></li>
      <li class="item-1">
        <a href="#"><img src="assets/img/tickets.png" alt="ICON III"><br>SCHEDULE</a>
      </li>
      <li class="item-1">
        <a href="#"><img src="assets/img/shopping-bag.png" alt="ICON IV"><br>STORE</a>
      </li>
      <li class="item-1">
        <a href="#"><img src="assets/img/link.png" alt="ICON IV"><br>LINKS</a>
      </li>
    </ul>
  </nav>
  <main class="zone-main">
    <div class="wrap-main">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </main>
  <footer class="zone-footer">
    <ul class="footer-container">
      <li class="footer-item">P.Y.G. Administrative Service - Since 2012</li>
      <li class="footer-item-buffer"></li>
      <li class="footer-item push">PRIVACY POLICY</li>
      <li class="footer-item push">HELP</li>
    </ul>
  </footer>
</body>

</html>

提前致谢。

【问题讨论】：

因为position: fixed; 将元素移出正常流程并将其固定在视口上。你试探性地想要position: sticky
这就是固定定位的工作原理，与绝对定位相同——它将一个元素从正常的布局流中取出，这样它就不会再影响其他元素的位置了。您需要指定填充/边距，以将实际的主要内容进一步向下推 - 或者改为查看 position:sticky。
@tacoshy AAH 非常感谢position: fixed 让<nav> 忽略了其他元素的定位。顺便说一句，我是否在我的.sticky 类中使用position: sticky（在上面的css 中）？再次非常感谢！
是的。粘性位置将使元素保持正常流动。一旦它到达视口中的定义点，它将变为position: fixed（在语义上被视为这样）。
@CBroe 谢谢！我总是忘记position: fixed 正在篡改元素的流程，而您提醒我要了解有关流程的更多信息。再次，非常感谢！

标签： html css flexbox

【解决方案1】：

删除nav 元素上的sticky css 类。 sticky css 类使您的 main 内容粘在页面顶部。

并在body上添加以下css

body {
  display:flex;
  flex-direction: column;
  height: 100%;
}

这会将所有容器（导航、主、页脚）置于彼此之下。

【讨论】：

为什么要添加display: flex; flex-direction: column？默认情况下，正常的块级元素行为会这样做。