使用CSS調整固定菜單和頁面內容

Question

我有一個固定的菜單欄，以便用戶滾動時它保持在頁面頂部。

但是，我希望菜單和頁面之間有空隙（在下面稱為pageTest）。

我嘗試將.menu中的邊距更改為

邊距：0 0 50px; 0;

但是什么都沒發生？ 我的小提琴

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

您應該在Menu div中使用top：0，並在情況下為Nav的高度提供與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

請參閱： .pageTest高於.menu的情況
由於position:fixed在.menu div上， .menu將元素從流中刪除，然后對.pageTest div進行相應調整，以使其在這種情況下從文檔的頂部開始。

因此，我們可以只給出position:relative對於.pageTest div來操縱top property 。

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

提供top:100px將在.pageTest div之后.menu啟動.menu div。
因此，添加50px可以在兩個div之間50px出間隔。

 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 個解決方案

解決方案1
1 2018-08-08 11:07:44

解決方案2
1 已采納 2018-08-08 11:08:45

解決方案3
1 2018-08-08 11:52:17

使用CSS調整固定菜單和頁面內容

問題描述

3 個解決方案

解決方案1 1 2018-08-08 11:07:44

解決方案2 1 已采納 2018-08-08 11:08:45

解決方案3 1 2018-08-08 11:52:17

解決方案1
1 2018-08-08 11:07:44

解決方案2
1 已采納 2018-08-08 11:08:45

解決方案3
1 2018-08-08 11:52:17