网页布局绝对定位(position)轻松简单

网页布局绝对定位（position）是一种在CSS中使用的布局技术，它允许我们将网页中的元素放在任何位置，而不受其他元素所影响。本攻略将向您展示如何使用绝对定位来创建网页布局。

使用绝对定位的前提

在使用绝对定位时，需要先将元素的父元素设置为相对定位（position: relative），以便元素可以相对于其父元素进行定位。如果没有设置元素的父元素相对定位，则元素将相对于屏幕进行定位。

创建绝对定位的元素

在CSS中，使用absolute属性来创建绝对定位的元素。例如：

.positioned {
  position: absolute;
  top: 100px; /* 离父元素顶端100像素 */
  left: 200px; /* 离父元素左侧200像素 */
}

在上面的例子中，我们创建了一个class为positioned的元素，将其定位在其父元素的(200px, 100px)的位置。

示例1：使用绝对定位创建页面布局

现在，我们来看一个使用绝对定位来创建页面布局的示例。假设我们希望在页面的左侧创建一个菜单栏，右侧放置主体内容。

首先，我们需要创建一个容器元素来包含菜单栏和主体内容。我们将其设置为相对定位：

.container {
  position: relative;
}

接下来，我们创建两个元素分别用于菜单栏和主体内容：

.menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
}

.content {
  position: absolute;
  top: 0;
  left: 220px;
  width: calc(100% - 220px); /* 计算剩余宽度 */
}

在上面的代码中，我们使用了绝对定位，将菜单栏和主体内容放置在父容器的左侧和右侧，分别占据200像素和剩余宽度。

示例2：使用绝对定位创建响应式布局

下面让我们来看看如何使用绝对定位来创建响应式布局。假设我们希望创建一个具有两个区域的布局，当浏览器窗口小于600像素时，这两个区域应该成为垂直布局。

首先，我们需要在HTML中创建两个区域元素：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

接下来，我们使用以下CSS来定义这两个区域元素：

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: red;
}

.box2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
}

在上面的CSS中，我们将第一个元素（box1）放在屏幕左侧，第二个元素（box2）放在屏幕右侧。当浏览器窗口宽度小于600像素时，这两个区域元素会重叠在一起。

想要在小屏幕上将它们垂直排列，我们可以使用@media查询，当屏幕宽度小于600像素时，将box2的绝对定位切换为相对定位：

@media only screen and (max-width: 600px) {
  .box2 {
    position: relative;
  }
}

这将使box2从右侧的绝对位置流回正常的文档流，并在box1下面堆栈。

通过这两个示例，我们可以看到，使用绝对定位来创建网页布局是非常灵活而且简单的。可以让我们轻松改变一个元素在屏幕上的位置，使我们更加自由掌控布局。