你好，我想問一些與（也許）元素定位有關的問題。
所以我一直被這個問題困擾了一段時間。和 正在堆疊在一起。是否有有效的解決方法，因此將直接在 ? 奇怪的是，它也被困在那里。
這是它的螢屏截圖： 頁面的螢屏截圖
這是我的 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>提前致謝。
uj5u.com熱心網友回復：
洗掉元素sticky上的 css 類nav。該stickyCSS類，使您的main內容粘貼到頁面的頂部。
并在 body
body {
display:flex;
flex-direction: column;
height: 100%;
}
這將所有容器（導航、主、頁腳）放在一起。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330132.html