滾動上的“位置：固定”圖像

Question

我正在創建一個“關於我們”頁面。 我添加了一個導航欄，並在頁面中添加了我們的圖像。 當我向下滾動頁面時，position 上的圖像position: fixed (on css)導航欄。 如何在圖像上顯示導航欄？ 我的代碼是：

div#nav {
  position: fixed
}

<div id="nav">
<a href="/">Main Page</a>
</div>
<div id="about">
<img src="/me.jpg">
<img src="/friend.jpg">
</div>

當用戶向下滾動頁面時，圖像顯示在nav上。 我怎樣才能解決這個問題？

Answer 1

使用z-index對 Z 軸上的元素進行排序：

div#nav {
  position: fixed;
  z-index : 999;
}

<div id="nav">
<a href="/">Main Page</a>
</div>
<div id="about">
<img src="/me.jpg">
<img src="/friend.jpg">
</div>

z-index: 3將顯示在z-index: 2之上，依此類推..

Answer 2

試試下面的 css 代碼

body{
  margin-top:40px;
}
#nav {
  position: fixed;
  top:0;
  padding:20px 0;
  background:#FFF;
  width:100%;
}