介绍
在本实验中，你将学习如何使用 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 布局技术的实践经验。
