Question

我有一个固定的菜单栏，以便用户滚动时它保持在页面顶部。

但是，我希望菜单和页面之间有空隙（在下面称为pageTest）。

我尝试将.menu中的边距更改为

边距：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;
 }

Answer 1

您应该在菜单div中使用top：0 并给出与Nav高度相同的边距，即100px 工作代码在这里

<body>


<div class="menu">

</div>

<div class="pageTest">


</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;
  top:0;
}


.pageTest {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  background-color: yellow;
  height: 800px;
  margin-top:150px
}

我希望我回答了您的问题

Answer 2

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>

Answer 3

请参见： Case where .pageTest is above .menu
由于position:fixed上的.menu从流中删除了元素，因此.pageTest div也进行了相应的调整在这种情况下，它从文档的顶部开始。

因此，我们可以将 position:relative 赋予.pageTest div以操纵 top property 。

.pageTest { //other css properties.. position: relative; top: 150px; }

提供 top:100px 将在.pageTest格之后紧随.menu格开始。
因此添加了 50px ，以使两个div之间保持间隔。

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;
}


.pageTest {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  background-color: yellow;
  height: 800px;
  position: relative;
  top: 150px; // can be adjusted accordingly
}

<body>


<div class="menu">

</div>

<div class="pageTest">


</div>

</body>

使用CSS

3 个答案: