使用CSS的position属性控制页面布局的入门教程

关于使用CSS的position属性控制页面布局，下面是一个完整攻略：

一、什么是position属性

position是CSS的一个布局属性，它可以用来控制元素的定位方式。常见的定位方式有三种：相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。

相对定位是指相对于元素原来的位置进行定位，元素所占的空间始终保留在文档流中，通常可以用left、right、top、bottom属性来进行微调，语法如下：

position: relative;
left: 20px;
top: 10px;

绝对定位则是指相对于其包含元素（父元素）的位置进行定位，如果没有包含元素，就相对于html元素，不占用文档流。通常用left、right、top、bottom属性来指定元素的位置，语法如下：

position: absolute;
left: 50px;
top: 50px;

固定定位跟绝对定位类似，不过是相对于浏览器窗口固定的位置进行定位，不随页面滚动而改变。通常用left、right、top、bottom属性来指定元素的位置，语法如下：

position: fixed;
left: 0;
top: 0;

二、如何使用position属性

1. 简单定位

我们可以先通过设置元素的position属性为relative或absolute来进行简单的定位，以relative为例，代码如下：

<div class="container">
  <div class="box">
    <p>我是一个盒子</p>
  </div>
</div>

.box {
  position: relative;
  top: 50px;
  left: 50px;
}

这个例子中，我们先使用了一个盒子元素.box，然后设置其position属性为relative，最后通过top和left属性分别设置距离顶部和左边的偏移量，这样就可以让盒子元素相对于原来位置上下左右移动。

2. 绝对定位

绝对定位是使用比较频繁，下面给出一个例子，以清单菜单的实现为例：

<header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品中心</a></li>
      <li><a href="#">公司简介</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

header {
  background-color: #333;
  height: 50px;
  line-height: 50px;
}

nav {
  position: absolute;
  bottom: 0;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  float: left;
  margin-right: 20px;
}

a {
  color: #fff;
  text-decoration: none;
}

在这个例子中，我们先设置header的高度为50px，并设置nav的position属性为absolute并bottom:0，然后在nav中放置ul菜单，设置li浮动，使用margin-right包含每个菜单项之间的间距，最后设置文字颜色和样式。

三、总结

通过上面两个例子，我们可以看出，使用position属性控制页面布局可以让页面更加灵活，但要注意在使用时掌握好各个属性值之间的关系，避免出现意外。

希望本文对初学者有所帮助，如果有任何疑问，欢迎留言交流。