css固定导航栏且在最上层

CSS固定导航栏是一种很常见的布局效果，它可以使导航栏在页面滚动时一直固定在页面的顶部或底部，从而方便用户进行导航，提升用户体验。本文将介绍如何使用CSS实现固定导航栏且在最上层。

/* 将导航栏固定在页面顶部 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

/* 设置导航栏样式 */
.nav {
  background-color: #fff;
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  text-align: center;
}

/* 设置网页主体样式 */
.container {
  width: 80%;
  margin: 80px auto;
  font-size: 16px;
  line-height: 1.6;
}

上述代码可以将导航栏固定在页面顶部，且保持在页面的最上层。需要注意的是，这里的z-index属性设置为999，确保导航栏在层级上最高，不会被其他元素遮挡。

除了使用fixed定位，我们还可以使用sticky定位来实现固定导航栏。它的作用与fixed属性相似，但它会在页面滚动到某个位置时，停止固定并变为相对定位，从而不影响文档流布局。

/* 将导航栏固定在页面顶部 */
.nav {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

上述代码中，我们使用了sticky属性来将导航栏固定在页面顶部。不同于fixed定位，sticky元素会在页面滚动到指定位置后变为相对定位，从而不影响其他元素的位置。因此，sticky定位可以更加灵活地控制网页布局。

综上所述，我们可以通过CSS固定导航栏且在最上层，从而提升用户的网页体验。无论是fixed还是sticky属性，都可以让导航栏在页面滚动时始终保持在用户的视野范围内，方便用户进行导航，提升网页的可用性。