HTML中相对定位与绝对定位的实战应用：从盒模型到固定广告栏与奥运五环

盒模型基础：标准模型与IE模型

在CSS布局中，盒模型是理解元素尺寸与定位的基石。盒模型由内到外依次为content（内容）、padding（内边距）、border（边框）和margin（外边距）。根据宽高计算方式的不同，盒模型分为标准模型和IE模型。

标准模型中，元素的width和height仅指content区域的尺寸，不包含padding和border。而IE模型中，width和height则包含了content、padding和border的总和。实际开发中，我们通常按照IE模型来计算元素的最终占据空间。

例如，对于以下CSS代码：

div {
  width: 200px;
  height: 200px;
  border: 10px solid black;
  padding: 10px 20px 30px;
  margin: 10px 20px;
}

其实际宽度为：200 + 10*2 + 20*2 = 260px；实际高度为：200 + 10*2 + 10 + 30 = 260px。注意，border和padding在计算时需要分别乘以2（左右或上下），而margin虽然影响布局但不计入元素的宽高。

position定位属性详解

CSS中的position属性用于控制元素的定位方式，共有四个常用值：static、relative、absolute和fixed。理解它们的区别是进行复杂布局的关键。

static（默认值）

static是默认定位方式，元素按照正常的文档流排列，此时top、bottom、left、right和z-index属性均不生效。

relative（相对定位）

relative生成相对定位的元素，元素仍保留在正常文档流中，但可以通过top、bottom、left、right属性相对于其正常位置进行偏移。relative定位的元素可以作为absolute定位子元素的参照物，且不会影响其他元素的布局。

absolute（绝对定位）

absolute生成绝对定位的元素，它会脱离正常文档流，相对于最近的已定位（非static）祖先元素进行定位。如果祖先元素中没有定位元素，则相对于文档根元素（html）定位。absolute定位常用于创建浮动的UI组件，如弹窗、下拉菜单等。

fixed（固定定位）

fixed生成绝对定位的元素，相对于浏览器窗口进行定位，不随页面滚动而移动。这使得fixed非常适合制作固定导航栏、侧边广告等需要始终可见的元素。

此外，z-index属性用于控制元素的堆叠顺序，数值越大越靠近用户视线，默认值为0。

实战一：制作固定广告栏

我们来实现一个常见的网页左侧固定广告栏，无论用户如何滚动页面，广告栏始终固定在浏览器窗口的左侧中央位置。

首先，在HTML中创建一个div元素，并添加大量换行标签以模拟长页面：

<!DOCTYPE html>
<html>
<head>
<title>固定广告栏</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
<div>爱国敬业文明民主和谐...</div>
<br><br><br><br><br><br><br><br><br><br>
<!-- 此处省略多个br标签以模拟长页面 -->
</body>
</html>

对应的CSS代码如下：

* {
  margin: 0;
  padding: 0;
}
div {
  position: fixed;
  width: 50px;
  height: 200px;
  left: 0;
  top: 300px;
  background-color: green;
}

首先，通过通配符选择器将页面所有元素的margin和padding重置为0，这是前端开发的常见初始化操作。然后，为div设置position: fixed，使其相对于浏览器窗口定位，left: 0和top: 300px将广告栏固定在左侧距顶部300px的位置。这样，无论页面如何滚动，广告栏都会保持不动。

实战二：利用absolute绘制奥运五环

absolute定位的典型应用是创建复杂的图形布局，例如奥运五环。五环由五个相交的圆组成，我们可以通过absolute定位和z-index实现环环相扣的效果。

首先，创建一个父级div作为画布，并设置position: fixed使其居中且不随滚动移动：

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1000px;
  height: 700px;
  margin-left: -500px;
  margin-top: -350px;
  background-color: #999;
}

这里使用left: 50%和top: 50%将画布左上角定位到页面中心，再通过负的margin值将画布居中。

接下来，在画布中放置五个圆，每个圆都使用position: absolute相对于画布定位。上面三个圆（蓝、黑、红）水平排列，下面两个圆（黄、绿）稍微下移，并通过z-index: 1让下面的圆覆盖在上面的圆之上，形成环环相扣的效果。

.box1 {
  position: absolute;
  margin-left: 200px;
  margin-top: 200px;
  width: 170px;
  height: 170px;
  border: 10px solid #006;
  border-radius: 50%;
}
.box2 {
  position: absolute;
  margin-left: 420px;
  margin-top: 200px;
  width: 170px;
  height: 170px;
  border: 10px solid black;
  border-radius: 50%;
}
.box3 {
  position: absolute;
  margin-left: 640px;
  margin-top: 200px;
  width: 170px;
  height: 170px;
  border: 10px solid #B00;
  border-radius: 50%;
}
.box4 {
  position: absolute;
  margin-left: 310px;
  margin-top: 300px;
  width: 170px;
  height: 170px;
  border: 10px solid yellow;
  border-radius: 50%;
  z-index: 1;
}
.box5 {
  position: absolute;
  margin-left: 530px;
  margin-top: 300px;
  width: 170px;
  height: 170px;
  border: 10px solid green;
  border-radius: 50%;
  z-index: 1;
}

通过border-radius: 50%将矩形变为正圆，利用margin调整各圆的位置。上面三个圆的圆心间距为220px（170px圆宽 + 50px间隔），下面两个圆通过margin-top: 300px下移，并使用z-index: 1确保它们覆盖在上面的圆上。

最终，在浏览器中即可看到奥运五环的完整效果。这个实例充分展示了absolute定位相对于父级元素进行精确位置控制的能力。

总结

通过以上两个实战案例，我们掌握了position属性中relative、absolute和fixed的核心用法。relative保留原位置作为参照，absolute脱离文档流相对于最近的定位祖先定位，fixed则固定于浏览器窗口。结合盒模型的尺寸计算和z-index的层级控制，可以构建出各种复杂的页面布局和交互组件。