使用 CSS 创建固定定位布局 - 实战教程

介绍

在本实验中，你将学习如何使用 CSS 创建固定定位布局，这是一种强大的技术，用于在网页上保持元素的位置。实验将引导你理解固定定位的概念，设置 HTML 项目结构，并将固定定位应用于侧边广告，同时探索元素在页面滚动时如何保持静止。

通过遵循逐步的指导，你将获得使用 CSS 定位属性（如 position: fixed）的实用技能，并学习如何使用 top、bottom、left 和 right 属性精确控制元素的位置。实验提供了创建响应式和视觉一致布局的实践经验，这些布局在页面滚动时保持其位置不变。

理解固定定位概念

在这一步中，你将学习 CSS 中的固定定位，这是一种强大的布局技术，允许元素在屏幕上保持固定位置，无论页面是否滚动。

固定定位是一种 CSS 定位方法，它使元素在屏幕上的位置保持不变，即使页面滚动时也是如此。与其他定位方法不同，固定元素在用户滚动页面时不会移动。

让我们通过一个简单的示例来探索基本概念：

<!doctype html>
<html>
  <head>
    <style>
      .fixed-element {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #f1f1f1;
        padding: 10px;
        border: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div class="fixed-element">I'm a fixed element that stays in place!</div>
    <div style="height: 2000px;">
      Scroll down to see the fixed element remain in position
    </div>
  </body>
</html>

固定定位的关键特性：

在 CSS 中使用 position: fixed;
相对于浏览器窗口定位
页面滚动时不会移动
可以使用 top、bottom、left 和 right 属性精确放置

在浏览器中查看时的示例输出：

.fixed-element 将始终保持在距离屏幕顶部和右侧 20 像素的位置
即使你向下滚动页面，该元素也会保持在屏幕上的相同位置

设置 HTML 项目结构

在这一步中，你将为我们固定定位布局的演示创建项目结构。我们将在 ~/project 目录下设置一个简单的 HTML 项目，作为我们 CSS 定位练习的基础。

首先，导航到项目目录并创建必要的文件：

cd ~/project
mkdir fixed-positioning-demo
cd fixed-positioning-demo

现在，创建基本的 HTML 文件结构：

touch index.html
touch styles.css

打开 index.html 文件并添加以下基本 HTML 结构：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>This is a sample page to demonstrate fixed positioning in CSS.</p>

      <!-- We'll add more content in subsequent steps -->
    </div>
  </body>
</html>

创建一个基本的 CSS 文件 styles.css，并添加一些初始样式：

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

示例输出结构：

~/project/fixed-positioning-demo/
├── index.html
└── styles.css

此设置提供了一个干净、简单的项目结构，我们将在后续步骤中在此基础上演示固定定位技术。

将固定定位应用于侧边广告

在这一步中，你将学习如何使用 CSS 创建固定定位的侧边广告。我们将修改 index.html 和 styles.css 文件，添加在滚动时保持位置的侧边广告元素。

更新 index.html 文件以包含侧边广告元素：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Left Side Ad</h3>
      <p>This ad stays in place!</p>
    </div>

    <div class="right-ad">
      <h3>Right Side Ad</h3>
      <p>Another fixed advertisement</p>
    </div>

    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>Scroll down to see how the side advertisements remain fixed.</p>

      <!-- Add more content to create scrolling effect -->
      <div style="height: 2000px;">Long content to demonstrate scrolling</div>
    </div>
  </body>
</html>

修改 styles.css 文件以将固定定位应用于广告：

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.left-ad,
.right-ad {
  position: fixed;
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.left-ad {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.right-ad {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

关于固定定位的关键点：

position: fixed; 使广告保持在固定位置
left 和 right 属性将广告定位在屏幕两侧
top: 50% 和 transform: translateY(-50%) 使广告垂直居中

浏览器中的示例输出：

两个侧边广告将固定在屏幕上
广告在页面滚动时保持位置不变
广告在屏幕上垂直居中

使用 Top 和 Right 属性调整元素位置

在这一步中，你将学习如何使用 top、right、bottom 和 left 属性精确控制固定定位元素的位置。这些 CSS 属性允许你将固定元素准确地定位在屏幕上的任何位置。

更新 styles.css 文件以演示不同的定位技术：

/* Previous styles remain the same */

.left-ad {
  position: fixed;
  top: 20px; /* 距离屏幕顶部 20 像素 */
  left: 20px; /* 距离屏幕左侧 20 像素 */
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.right-ad {
  position: fixed;
  top: 50%; /* 垂直居中 */
  right: 20px; /* 距离屏幕右侧 20 像素 */
  width: 150px;
  transform: translateY(-50%); /* 调整以实现完美居中 */
  background-color: #e4e4e4;
  padding: 10px;
  border: 1px solid #ccc;
}

.bottom-ad {
  position: fixed;
  bottom: 20px; /* 距离屏幕底部 20 像素 */
  left: 50%; /* 水平居中 */
  width: 300px;
  transform: translateX(-50%); /* 调整以实现完美居中 */
  background-color: #d4d4d4;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbb;
}

更新 index.html 文件以包含新的底部广告：

<body>
  <div class="left-ad">
    <h3>Left Side Ad</h3>
    <p>Positioned 20px from top-left</p>
  </div>

  <div class="right-ad">
    <h3>Right Side Ad</h3>
    <p>Vertically centered</p>
  </div>

  <div class="bottom-ad">
    <h3>Bottom Ad</h3>
    <p>Centered at the bottom of the screen</p>
  </div>

  <div class="content">
    <h1>Fixed Positioning Layout</h1>
    <p>Explore different positioning techniques</p>

    <div style="height: 2000px;">Scroll to see fixed elements</div>
  </div>
</body>

关键定位属性解释：

top：距离屏幕顶部的距离
right：距离屏幕右侧的距离
bottom：距离屏幕底部的距离
left：距离屏幕左侧的距离
transform：微调定位以实现完美居中

浏览器中的示例输出：

左侧广告：距离屏幕左上角 20 像素
右侧广告：垂直居中于屏幕右侧
底部广告：居中于屏幕底部
所有元素在滚动时保持固定位置

测试固定元素的滚动行为

在这一步中，你将通过添加更多内容来探索固定定位元素的独特滚动行为，展示这些元素在页面滚动时如何保持静止。

更新 index.html 文件以包含更多用于滚动的内容：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Scroll Test</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Left Ad</h3>
      <p>I stay in place!</p>
    </div>

    <div class="right-ad">
      <h3>Right Ad</h3>
      <p>Always visible</p>
    </div>

    <div class="bottom-ad">
      <h3>Bottom Ad</h3>
      <p>Fixed at bottom</p>
    </div>

    <div class="content">
      <h1>Scrolling Behavior Demonstration</h1>

      <div class="scroll-content">
        <h2>Scroll Down to See Fixed Elements</h2>

        <!-- Create long content to enable scrolling -->
        <div class="long-content">
          <h3>Long Content Section</h3>
          <p>
            This section will allow you to scroll and observe how fixed-position
            elements remain in place.
          </p>

          <!-- Repeat paragraphs to create scrollable content -->
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in
            dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.
          </p>

          <!-- Add multiple repetitions to create significant scroll length -->
          <p>
            Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in
            nulla enim. Phasellus molestie magna non est bibendum non venenatis
            nisl tempor.
          </p>

          <!-- Repeat similar paragraphs multiple times -->
          <p>
            Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor
            posuere. Praesent id metus massa, ut blandit odio.
          </p>

          <!-- Continue adding paragraphs to create scroll effect -->
          <p>
            Proin quis tortor orci. Etiam at risus et justo dignissim congue.
            Donec congue lacinia dui, a porttitor lectus condimentum laoreet.
          </p>

          <!-- More paragraphs to extend scrolling -->
          <p>
            Nunc dignissim risus id metus. Cras ornare tristique elit. Vivamus
            vestibulum nulla sit amet tristique reprehenderit.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

更新 styles.css 以增强滚动演示效果：

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.long-content {
  background-color: #f9f9f9;
  padding: 20px;
}

/* Previous fixed positioning styles remain the same */

关于固定定位的关键观察：

固定元素保持在屏幕的同一位置
滚动不会影响它们的位置
无论页面滚动到何处，元素始终可见

示例滚动行为：

左侧、右侧和底部广告保持静止
内容在固定元素后面滚动
固定元素始终在屏幕上可见

总结

在本实验中，参与者学习了 CSS 中的固定定位（fixed positioning），这是一种强大的布局技术，允许元素在页面滚动时保持静止。通过使用 position: fixed 属性，开发者可以创建保持在固定位置的元素，例如侧边广告或导航菜单，这些元素即使用户滚动浏览内容时也始终可见。

实验引导学习者通过创建一个实际示例来演示固定定位，包括设置 HTML 项目结构以及应用 top 和 right 等 CSS 属性来精确控制元素的位置。参与者探索了固定定位的关键特性，例如其相对于浏览器窗口的定位方式以及保持恒定屏幕位置的能力，从而获得了这一重要 CSS 布局技术的实践经验。