我有一个固定的菜单栏，因此当用户滚动时它会保留在页面顶部。
但是，我希望菜单和页面之间有一个间隙(下面称为 pageTest)。
我尝试将 .menu 中的边距更改为
margin: 0 0 50px; 0;
然而没有任何反应？我的fiddle
HTML
<body>
<div class="menu">
</div>
<div class="content">
</div>
</body>
CSS
body {
padding: 0px;
margin: 0px;
}
.menu {
background-color: #9FACEC; /* Medium blue */
position: fixed;
width: 100%;
margin: 0;
z-index: 1;
display: flex;
justify-content: center;
overflow: hidden;
height: 100px;
}
.content {
width: 90%;
margin: 0 auto;
overflow: hidden;
background-color: yellow;
height: 800px;
}
最佳答案
position: fixed 从正常文档流中移除一个元素。在此元素上设置边距不会影响周围的元素。
您的边距应添加到 .content 而不是 .menu。
.menu 还需要 top: 0 以防止页边距将其向下推。
body {
padding: 0px;
margin: 0px;
}
.menu {
background-color: #9FACEC;
/* Medium blue */
position: fixed;
width: 100%;
margin: 0;
z-index: 1;
display: flex;
justify-content: center;
overflow: hidden;
height: 100px;
top: 0; /* Added */
}
.content {
width: 90%;
margin: 0 auto;
margin-top: 55px;
overflow: hidden;
background-color: yellow;
height: 800px;
margin-top: 125px; /* Added */
}<div class="menu">
</div>
<div class="content">
</div>关于html - 使用 CSS 调整固定菜单和页面内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51745000/