时间戳

首页 > 解决方案 > 为什么我的

堆积在我的顶部?

html - 为什么我的
堆积在我的顶部?

问题描述

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

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

这是它的屏幕截图： 页面截图

这是我的 css 和 html 片段：

@-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>

提前致谢。

标签： htmlcssflexbox

解决方案

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

并在上面添加以下cssbody

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

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

推荐阅读