介绍
在本实验中，你将学习如何通过创建包含两张图片的网页布局来应用 CSS 中的相对定位（relative positioning）。实验将引导你完成 HTML 项目结构的搭建、创建基本的 CSS 样式表，并实现用于图片布局的相对定位技术。
你将首先创建一个项目目录，初始化一个包含图片占位符的 HTML 文件，并下载示例图片。接着，你将开发一个 CSS 样式表，使用相对定位来定义这些图片的布局和位置。相对定位允许你调整元素相对于其正常文档流的位置，而不会影响其他元素的布局。
设置 HTML 项目结构
在这一步中，你将搭建一个基本的 HTML 项目结构，用于学习 CSS 相对定位（relative positioning）。我们将创建一个简单的项目目录，并初始化网页布局实验所需的文件。
首先，导航到项目目录：
cd ~/project为我们的 CSS 定位项目创建一个新目录：
mkdir css-positioning
cd css-positioning现在，使用 WebIDE 创建基本的项目文件：
- 创建一个名为
index.html的 HTML 文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Relative Positioning</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img src="left-image.jpg" alt="Left Image" class="left-image" />
<img src="right-image.jpg" alt="Right Image" class="right-image" />
</div>
</body>
</html>- 下载项目的示例图片：
wget https://labex.io/sample-left-image.jpg -O left-image.jpg
wget https://labex.io/sample-right-image.jpg -O right-image.jpg示例输出：
--2024-xx-xx xx:xx:xx-- https://labex.io/sample-left-image.jpg
Resolving labex.io (labex.io)...
Downloading sample images...此设置创建了一个包含图片占位符的基本 HTML 结构，并为后续步骤中的 CSS 定位实验做好了准备。
创建基础 CSS 样式表
在这一步中，你将创建一个基本的 CSS 样式表，为网页设置基础样式。CSS（Cascading Style Sheets）允许你控制 HTML 元素的布局、外观和定位。
导航到项目目录：
cd ~/project/css-positioning在 WebIDE 中创建一个名为 styles.css 的新 CSS 文件：
/* Basic reset and container styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 800px;
margin: 50px auto;
position: relative;
border: 2px solid #333;
padding: 20px;
}
/* Initial image styles */
.left-image,
.right-image {
width: 200px;
height: auto;
border: 1px solid #666;
}让我们分解一下这段 CSS：
*选择器应用了一个重置样式，移除了默认的边距（margin）和内边距（padding）.container创建了一个带边框的居中容器.left-image和.right-image设置了图片的初始大小并添加了边框
在浏览器中查看时的示例输出：
[一个带边框的居中容器，包含两张大小相同的图片]这个基本样式表为我们的相对定位实验提供了基础。在接下来的步骤中，我们将修改这些样式以演示相对定位技术。
为左图实现相对定位
在这一步中，你将学习如何使用相对定位（relative positioning）在左图的原始文档流中移动它。相对定位允许你调整元素相对于其正常位置的位置，而不会影响其他元素。
在 WebIDE 中打开 styles.css 文件，并为左图添加以下 CSS：
.left-image {
position: relative;
top: 20px; /* 向下移动 20 像素 */
left: 50px; /* 向右移动 50 像素 */
background-color: #f0f0f0; /* 添加浅色背景以提高可见性 */
}关于相对定位的关键点：
position: relative;启用相对定位top将元素向下移动left将元素向右移动- 元素的原始空间会被保留
- 其他元素不会受到此移动的影响
示例视觉效果：
[左图向下移动 20 像素，向右移动 50 像素，
同时保留其原始布局空间]相对定位允许你微调元素的位置，而不会破坏整体页面布局。
为右图实现相对定位
在这一步中，你将把相对定位（relative positioning）应用到右图，展示如何使用 CSS 独立移动元素。我们将使用不同的定位值来展示相对定位的灵活性。
在 WebIDE 中打开 styles.css 文件，并为右图添加以下 CSS：
.right-image {
position: relative;
bottom: 30px; /* 向上移动 30 像素 */
right: -40px; /* 向左移动 40 像素 */
background-color: #e0e0e0; /* 添加浅色背景以提高可见性 */
}定位的关键区别：
bottom将元素向上移动right使用负值将元素向左移动- 图片保留其原始布局空间
- 其他元素不会受到此移动的影响
示例视觉效果：
[右图向上移动 30 像素，向左移动 40 像素，
同时保留其原始布局空间]这个示例展示了如何使用不同的定位属性通过相对定位来微调元素的位置。
验证定位与布局
在这最后一步中，你将回顾并验证应用到图片上的相对定位技术。我们将添加一些最后的修饰，以增强对相对定位工作原理的视觉理解。
使用完整的样式更新 styles.css 文件，以突出定位效果：
.container {
width: 100%;
max-width: 800px;
margin: 50px auto;
position: relative;
border: 2px solid #333;
padding: 20px;
text-align: center;
}
.left-image,
.right-image {
width: 200px;
height: auto;
border: 3px solid #666;
transition: transform 0.3s ease;
}
.left-image {
position: relative;
top: 20px;
left: 50px;
background-color: #f0f0f0;
}
.right-image {
position: relative;
bottom: 30px;
right: -40px;
background-color: #e0e0e0;
}
/* 添加悬停效果以可视化定位 */
.left-image:hover,
.right-image:hover {
transform: scale(1.05);
}关键验证点：
- 图片相对于其原始位置进行定位
- 容器保持一致的布局
- 悬停效果有助于可视化定位
示例视觉效果：
[两张图片在居中容器中以不同方式定位，
并带有微妙的悬停效果以突出其位置]这最后的样式展示了相对定位在创建灵活和动态布局中的强大功能。
总结
在本实验中，参与者学习了如何通过从头创建一个结构化的网页项目来应用 CSS 相对定位（relative positioning）。这一过程包括设置 HTML 项目目录、创建带有图片占位符的 index.html 文件，以及下载示例图片以演示定位技术。
实验引导学习者创建了一个基本的 CSS 样式表，建立了基础样式原则，并为左图和右图实现相对定位做好了准备。通过遵循逐步的指导，参与者获得了管理网页布局元素的实践经验，并理解了如何使用 CSS 定位来控制图片在容器中的位置。
