掌握CSS定位：创建固定左侧容器的教程-html教程-PHP中文网

掌握CSS定位：创建固定左侧容器的教程

心靈之曲

发布： 2025-10-12 13:35:01

原创

994人浏览过

掌握CSS定位：创建固定左侧容器的教程

本教程详细介绍了如何利用CSS的position: fixed属性来创建一个固定在页面左侧、垂直延伸的容器，适用于展示技能列表或导航等场景。文章将通过具体的代码示例，指导读者构建一个包含固定侧边栏和主内容区域的两栏布局，并探讨position: sticky等替代方案及响应式设计、层叠顺序等关键注意事项。

1. 理解固定定位的需求

在网页设计中，我们经常需要创建一些始终可见的元素，例如侧边导航栏、技能列表、广告或社交媒体分享按钮等。这些元素通常需要固定在屏幕的某个位置，即使页面滚动，它们也保持不动。本文将以创建一个固定在页面左侧、用于展示技能列表的容器为例，详细讲解如何实现这种布局。

2. 使用 position: fixed 实现固定容器

CSS的position: fixed属性是实现元素固定定位的核心。当一个元素被设置为position: fixed时，它会相对于浏览器视口（viewport）进行定位，并且在页面滚动时保持其位置不变。

2.1 position: fixed 的基本用法

要创建一个固定容器，我们需要为目标元素设置position: fixed，并通过top、bottom、left、right属性来指定其在视口中的精确位置。

CSS 示例:

/* styles.css */
.fixed-left-sidebar {
  width: 200px; /* 设置侧边栏宽度 */
  height: 100vh; /* 使侧边栏高度与视口高度相同，垂直延伸 */
  background-color: #f0f0f0; /* 背景色，便于区分 */
  position: fixed; /* 关键：固定定位 */
  top: 0; /* 距离视口顶部0距离 */
  left: 0; /* 距离视口左侧0距离 */
  padding: 20px;
  box-sizing: border-box; /* 确保内边距不增加宽度 */
  overflow-y: auto; /* 如果内容溢出，允许垂直滚动 */
}

.main-content {
  margin-left: 200px; /* 为固定侧边栏腾出空间 */
  padding: 20px;
}

登录后复制

HTML 示例:

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>简历页面 - 固定侧边栏</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- 固定左侧技能容器 -->
  <div class="fixed-left-sidebar">
    <h3>我的技能</h3>
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript</li>
      <li>React</li>
      <li>Node.js</li>
      <li>Git</li>
    </ul>
    <!-- 更多技能列表 -->
  </div>

  <!-- 主内容区域 -->
  <div class="main-content">
    <h1>我的简历</h1>
    <p>欢迎来到我的简历页面。以下是我的工作经历和项目经验。</p>

    <h2>工作经历</h2>
    <p><strong>公司A</strong> - 前端开发工程师 (2020 - 2023)</p>
    <ul>
      <li>负责响应式网页界面的开发与维护。</li>
      <li>参与组件库的设计与实现。</li>
      <li>优化页面性能，提升用户体验。</li>
    </ul>

    <p><strong>公司B</strong> - 网页设计师 (2018 - 2020)</p>
    <ul>
      <li>负责产品界面设计，确保用户体验一致性。</li>
      <li>与开发团队紧密合作，实现设计稿。</li>
    </ul>

    <h2>项目经验</h2>
    <p><strong>项目X</strong> - 电子商务平台</p>
    <ul>
      <li>负责前端架构搭建和核心模块开发。</li>
      <li>引入React Hooks，提升开发效率。</li>
    </ul>

    <p><strong>项目Y</strong> - 内容管理系统</p>
    <ul>
      <li>设计并实现了用户友好的后台管理界面。</li>
      <li>优化数据加载，减少页面等待时间。</li>
    </ul>

    <!-- 更多内容，用于测试滚动 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus auctor dictum. Aenean et arcu. Ut posuere felis non urna. Quisque ut lectus. In vitae turpis sed ligula consectetur lacinia. Aenean dapibus ipsum et nunc. Proin ornare ligula eu tellus. Aenean eu odio at enim dapibus rhoncus. Nullam eu lectus a lectus dapibus eleifend. Proin in neque sed quam dictum cursus. Fusce ornare felis nec lorem. Cras id mi. Ut dolor. Mauris in ut adipiscing.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus auctor dictum. Aenean et arcu. Ut posuere felis non urna. Quisque ut lectus. In vitae turpis sed ligula consectetur lacinia. Aenean dapibus ipsum et nunc. Proin ornare ligula eu tellus. Aenean eu odio at enim dapibus rhoncus. Nullam eu lectus a lectus dapibus eleifend. Proin in neque sed quam dictum cursus. Fusce ornare felis nec lorem. Cras id mi. Ut dolor. Mauris in ut adipiscing.</p>
  </div>

</body>
</html>

登录后复制

在上述示例中，.fixed-left-sidebar被固定在视口的左上角，并占据了整个视口高度。由于固定定位的元素会脱离正常的文档流，主内容区域（.main-content）需要通过设置margin-left来为其腾出空间，避免内容被侧边栏遮挡。

3. 替代方案：position: sticky

除了position: fixed，position: sticky也是一种实现元素“固定”效果的强大工具。它的行为介于position: relative和position: fixed之间。

当元素在视口内时，它表现得像position: relative。
当页面滚动到特定阈值时（由top、bottom、left、right定义），它会“粘”在视口的那个位置，表现得像position: fixed。

CSS 示例:

.sticky-header {
  position: sticky;
  top: 0; /* 当滚动到距离视口顶部0px时，元素开始固定 */
  background-color: #333;
  color: white;
  padding: 10px;
  z-index: 100; /* 确保粘性元素在其他内容之上 */
}

登录后复制

position: sticky更适用于在滚动过程中需要动态固定/解除固定的场景，例如表格的表头、文章的子标题等。对于始终需要固定在屏幕一侧的侧边栏，position: fixed通常是更直接和合适的选择。

Operator

OpenAI推出的AI智能体工具

175

查看详情

4. 重要的注意事项

4.1 元素脱离文档流

position: fixed的元素会脱离正常的文档流，这意味着它们不再占据空间，并且不会影响其他元素的布局。因此，你需要手动调整相邻元素的位置（例如使用margin或padding），以避免内容被固定元素遮挡。

4.2 响应式设计

在移动设备上，一个宽度为200px的固定左侧边栏可能会占用过多屏幕空间。因此，在进行响应式设计时，你可能需要使用媒体查询（Media Queries）来调整固定元素的样式：

在小屏幕上，可以将侧边栏的position改为static或relative，让它回到文档流中。
或者将其隐藏，并通过一个汉堡菜单来触发显示。
调整宽度或使其变为全屏覆盖层。

响应式 CSS 示例:

/* 默认桌面样式 */
.fixed-left-sidebar {
  width: 200px;
  /* ... 其他固定定位样式 ... */
}

.main-content {
  margin-left: 200px;
  /* ... */
}

/* 媒体查询：当屏幕宽度小于768px时 */
@media (max-width: 768px) {
  .fixed-left-sidebar {
    position: static; /* 解除固定定位 */
    width: 100%; /* 变为全宽 */
    height: auto; /* 高度自适应 */
    padding: 10px;
    border-bottom: 1px solid #ccc; /* 添加底部边框 */
  }

  .main-content {
    margin-left: 0; /* 移除左边距 */
  }
}

登录后复制

4.3 z-index 层叠顺序

由于position: fixed的元素会脱离文档流，它们在默认情况下会位于其他普通流内容之上。如果你有其他定位元素（如position: absolute或position: relative的元素），并且它们之间可能存在重叠，可以使用z-index属性来控制它们的堆叠顺序。z-index值越大，元素越靠上。

.fixed-left-sidebar {
  /* ... */
  z-index: 100; /* 确保侧边栏在大多数内容之上 */
}

.modal-dialog {
  /* 模态框需要更高的z-index */
  z-index: 1000; 
}

登录后复制

4.4 滚动行为

如果固定容器内部的内容可能超出其自身高度，记得设置overflow-y: auto;或overflow-y: scroll;，以便容器内部的内容可以独立滚动，而不会影响整个页面的滚动。

5. 总结与建议

通过position: fixed属性，我们可以轻松创建出固定在视口某处的容器，这对于构建现代、用户友好的网页布局至关重要。在实现过程中，请务必考虑其对文档流的影响，并通过margin、padding或媒体查询等方式进行适当的布局调整，以确保在不同设备上都能提供良好的用户体验。

对于初学者而言，建议在深入使用Bootstrap等CSS框架之前，先通过原生CSS理解position属性等基本概念。这有助于你更好地掌握网页布局的底层原理，并在遇到问题时能更有效地进行调试和解决。掌握这些基础知识，将为你的Web开发之旅打下坚实的基础。

以上就是掌握CSS定位：创建固定左侧容器的教程的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

纯JavaScript实现定时内容轮播与切换效果掌握CSS overflow 属性：实现固定高度容器内容滚动使用CSS变量和HTML数据属性实现动态主题切换教程 CSS导航链接点击区域优化：精确控制菜单项尺寸与布局 HTML单选按钮的无外观定制样式指南