我有一個正在開發的回應式網站。當它切換到移動布局時，頂部欄會向下滾動一點，然后才會停留在應該在的螢屏頂部，從而使所有內容都錯位。這適用于桌面布局。
#topbar {
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
height: 15%;
box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}
@media (min-width: 35em) {
#topbar {
height: 60px;
}
}<html>
<head>
<link href='stylesheet.css' rel='stylesheet' />
<script defer src='main.js'></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>
<body>
<section id='topbar'>
<nav>
<h1 id='logo'>Logo</h1>
<ul id='links'>
<li>
<a href='#home'>
<h1>Home</h1>
</a>
</li>
<li>
<a href='#about'>
<h1>About</h1>
</a>
</li>
<li>
<a href='#products'>
<h1>Products</h1>
</a>
</li>
<li>
<a href='#jobs'>
<h1>Jobs</h1>
</a>
</li>
</ul>
<div id='menu-button'>
<div id='line1'></div>
<div id='line2'></div>
<div></div>
</div>
</nav>
</section>
</body>
</html>uj5u.com熱心網友回復：
您可能需要更改結構。更改結構的原因是您需要將頂部標題（徽標部分）固定在頂部，并且您的導航應該在該部分之后開始。如果徽標部分占據整個寬度，則導航部分會自動停留在徽標部分下方。
因此，我提供的更改是：
將不同 div 中的 logo 部分和 nav 部分分開，并使它們成為同級，以便 nav 部分顯示在 logo 部分下方。
在固定徽標部分添加了 top: 0 以使其始終位于頂部。
將 logo 部分高度的 margin-top 添加到 nav 部分以使 nav 部分可見。
<html>
<head>
<style>
#topbar {
top: 0;
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
margin-bottom: 49px;
height: 60px;
box-shadow: 0 5px 10px rgb(124 124 124 / 30%);
}
#links {
margin-top: 60px;
}
body {
margin: 0;
}
@media (min-width: 35em) {
#topbar {
height: 60px;
}
}
</style>
<script defer src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="topbar">
<h1 id="logo">Logo</h1>
</div>
<nav>
<ul id="links">
<li>
<a href="#home"><h1>Home</h1></a>
</li>
<li>
<a href="#about"><h1>About</h1></a>
</li>
<li>
<a href="#products"><h1>Products</h1></a>
</li>
<li>
<a href="#jobs"><h1>Jobs</h1></a>
</li>
</ul>
<div id="menu-button">
<div id="line1"></div>
<div id="line2"></div>
<div></div>
</div>
</nav>
</body>
</html>uj5u.com熱心網友回復：
我認為那是因為不使用
- 最佳
- 左屬性
每當您使用位置屬性時，您必須使用這兩個屬性
將這兩個屬性添加到#Topbar
#topbar{
top: 0;
left: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496884.html