核心概念：position: fixed;

要将一个元素（比如菜单栏）“固定”在屏幕的某个位置，无论用户如何滚动页面，它都保持在原地，我们需要使用 CSS 的 position 属性，并将其值设置为 fixed。

fixed 定位是相对于浏览器窗口进行定位的，这意味着它会脱离正常的文档流，可以轻松地“漂浮”在页面的顶部。

使用 Dreamweaver 的“实时视图”和“CSS 设计器”（最推荐，最直观）

这是最现代、最简单的方法，特别适合初学者和习惯可视化操作的用户。

步骤 1: 准备你的 HTML 结构

确保你的 HTML 中有一个清晰的菜单栏结构，通常使用 <nav>

  1. 打开你的 HTML 文件（index.html）。
  2. 切换到 “实时视图” (Live View)。
  3. 将光标放在你想要作为菜单栏的元素上,比如一个包含链接的 <div> 或 <ul> 列表。
  4. 在 “插入” (Insert) 菜单中，选择 “结构” (Structural)，然后点击 “导航” (Navigation)，Dreamweaver 会为你生成一个标准的导航栏结构。

一个典型的菜单栏 HTML 结构如下：

<header>
  <nav id="main-menu">
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>
</header>
<!-- 页面其他内容，比如一个很长的 section -->
<section style="height: 2000px; background-color: #f0f0f0;">
  <p>向下滚动菜单栏，看它是否会固定在顶部。</p>
</section>

步骤 2: 使用 CSS 设计器添加样式

  1. 在右侧的 “CSS 设计器” (CSS Designer) 面板中，点击 “源” (Sources) 旁边的 号。
  2. 选择 “创建新的 CSS 文件” (Create New CSS File)，给它起个名字（如 style.css），然后点击“确定”。
  3. 确保这个新创建的 CSS 文件链接到了你的 HTML 文件中（Dreamweaver 通常会自动处理）。
  4. 在 “选择器” (Selector) 部分，点击 号，创建一个新的 CSS 选择器，因为我们给菜单栏的 nav 元素设置了 id="main-menu"，所以我们就选择这个 ID。
    • 输入选择器名称：#main-menu
  5. 在 “属性” (Properties) 面板中，找到 “定位” (Position) 属性组（通常有一个图钉图标）。
  6. 在 “位置” (Position) 下拉菜单中，选择 fixed。
  7. 一旦你选择了 fixed，Dreamweaver 会自动为你设置 top 和 left 属性，通常我们只需要设置：
    • top: 设置为 0px，这会让菜单栏的顶部与浏览器窗口的顶部对齐。
    • left: 设置为 0px，这会让菜单栏的左侧与浏览器窗口的左侧对齐。
    • width: 设置为 100%，这会让菜单栏的宽度和浏览器窗口一样宽，充满整个屏幕。

关键属性设置：

属性 值 说明
Position fixed 固定定位，相对于浏览器窗口
Top 0px 距离窗口顶部的距离
Left 0px 距离窗口左侧的距离
Width 100% 宽度占满整个窗口
Z-index 1000 (可选但推荐) 确保菜单栏在页面内容之上

（上图是 Adobe 官方示意图，展示了在 Dreamweaver 中设置定位属性）

步骤 3: 添加背景色和间距（可选）

为了让菜单栏在页面滚动时更清晰,你还可以添加一些样式：

  1. 在 #main-menu 选择器下，找到 “背景” (Background) 属性组，为它设置一个背景颜色，#333333。
  2. 找到 “间距” (Box) 属性组，设置 padding (内边距)，10px 20px，让菜单栏内的文字不会紧贴边缘。

你的 #main-menu CSS 可能看起来像这样：

#main-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  padding: 10px 20px;
  z-index: 1000; /* 确保在最上层 */
}
/* 为了防止页面内容被固定的菜单栏遮挡，给 body 添加一些上内边距 */
body {
  padding-top: 50px; /* 这个值应该和你的菜单栏总高度（高度+padding）差不多 */
}

直接在代码视图中编写 CSS

如果你更喜欢直接写代码,这个方法更快。

  1. 打开你的 HTML 文件，切换到 “代码视图” (Code View)。
  2. 在 <head> 标签内找到你的 <style> 标签（如果没有，就创建一个）。
  3. 在 <style> 标签内，添加以下 CSS 代码：
<head>
  <meta charset="UTF-8">我的网页</title>
  <style>
    /* 1. 设置菜单栏为固定定位 */
    #main-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #333;
      z-index: 1000; /* 确保菜单在内容之上 */
    }
    /* 2. (重要) 为 body 添加上内边距，防止内容被菜单栏遮挡 */
    body {
      padding-top: 60px; /* 根据你的菜单栏高度调整 */
    }
    /* (可选) 美化菜单链接 */
    #main-menu ul {
      list-style: none; /* 移除列表点 */
      margin: 0;
      padding: 0;
      display: flex; /* 使用 Flexbox 布局让链接水平排列 */
      justify-content: center; /* 居中对齐 */
    }
    #main-menu a {
      color: white;
      text-decoration: none;
      padding: 15px 20px;
      display: block;
    }
  </style>
</head>

重要提醒：防止内容被遮挡

当你使用 position: fixed 将菜单栏置顶后，它会脱离正常的文档流，悬浮在页面上，这会导致页面从顶部开始的内容（<body> 的第一个 <p> 或 <h1>）被菜单栏遮挡。

解决方法：

给 <body> 元素添加一个上内边距 (padding-top)，其值略大于你的菜单栏的总高度（高度 + 上下内边距）。

如果你的菜单栏 padding 是 10px，文字高度大约是 30px，那么总高度大约是 50px，你就可以给 body 设置 padding-top: 60px;。

使用 CSS 框架（如 Bootstrap）

如果你在项目中使用了像 Bootstrap 这样的 CSS 框架，事情会更简单。

  1. 确保你已经引入了 Bootstrap 的 CSS 文件。
  2. 在你的 HTML 中，给菜单栏的容器（通常是 <nav>）添加 Bootstrap 的类 navbar 和 navbar-expand-lg 等。
  3. 最关键的一步：添加类 fixed-top。

示例代码：

<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 菜单栏 HTML -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand