1 简介

上一篇文章，介绍了魔鬼属性——浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局使用户精准定位页面中的任意元素成为可能。因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。

2 定位布局

定位常用于布局，利用定位可以将元素精确摆放在任何位置。定位布局共有4种方式，分别是：

固定定位（fixed）。

相对定位（relative）。

绝对定位（absolute）。

静态定位（static）。

static是所有元素的默认值，存在于正常流中，不能使用偏移属性（top、bottom、left以及right）。通常所说的定位，使用的是另外3个关键字。

2.1 固定定位

固定定位不如其他定位类型用得普遍，确是最直观也是最容易理解的定位方式。给一个元素设置position: fixed就能将元素放在视口的任意位置。这需要搭配四种属性一起使用：top、right、bottom和left。这些属性的值决定了固定定位的元素与浏览器视口边缘的距离。

所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。position:fixed固定定位元素的“包含块”是根元素，唯一可以限制固定定位元素的就是