如何让 div 贴在屏幕顶部？

在 Web 开发中，经常需要将某个元素固定在屏幕顶部，比如网站的导航栏。下面将介绍几种常见的实现方法。

1. 使用 position: fixed;

position: fixed; 可以让元素相对于浏览器窗口固定在某一位置，不随页面滚动而移动。

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
  font-size: 20px;
}

上面的代码将 id 为 navbar 的元素固定在屏幕顶部，并设置了背景色、文字颜色、内边距和字体大小。

2. 使用 position: sticky;

position: sticky; 可以让元素在滚动到一定位置时固定在某一位置，不会随页面滚动而移动。它比 position: fixed; 更灵活，适合于一些特定的布局需求。

#navbar {
  position: sticky;
  top: 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
  font-size: 20px;
}

上面的代码将 id 为 navbar 的元素在滚动到顶部时固定在屏幕顶部。

3. 使用 flexbox

使用 flexbox 可以轻松实现元素的垂直居中和水平居中，同时固定在屏幕顶部。

<div class="navbar">
  <span>Logo</span>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
  font-size: 20px;
}

.navbar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul li {
  margin-left: 20px;
}

上面的代码使用了 flexbox 实现了一个具有 Logo 和导航菜单的顶部导航栏，并固定在屏幕顶部。

以上是三种常见的方法，具体使用哪一种根据具体需求来定。如果你还有其他方法或更好的实现，请在下面留言，共同学习进步！