CSS中，定位（positioning）是一种布局技术，通过使用position属性来确定一个元素的位置。常用的定位方式有相对定位（relative position）和绝对定位（absolute position）。
一、相对定位
相对定位是指在原有位置的基础之上进行微调整，不会完全脱离文档流，所以不会影响页面布局。相对定位可以与其他定位方式结合使用，如绝对定位、固定定位等等。
以下是相对定位需要使用的重要属性：
top：设置元素上部边缘距包含块上部边缘的偏移量right：设置元素右侧边缘距包含块右侧边缘的偏移量bottom：设置元素下部边缘距包含块下部边缘的偏移量left：设置元素左侧边缘距包含块左侧边缘的偏移量
设置了上述四个属性后就能够获得相对位置的定义。需要注意的是，相对定位对元素大小没有影响。
下面是一个简单的例子：
<div class="container">
<div class="box"></div>
</div>
.container {
position: relative;
height: 200px;
width: 200px;
background-color: #ccc;
}
.box {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
在上面的例子中，我们设置了一个居中展示的.container容器，并在其中嵌套了一个.box元素。通过将.box元素的位置相对调整50像素，实现了向下、向右的微调。
二、绝对定位
绝对定位将元素从文档流中完全拆离，可以将该元素定位到文档的任意位置，不会影响页面布局。绝对定位主要是按照包含块进行定位，而包含块可能是内容自身，也可能是最近的祖先元素，还有其他一些元素。如果无法找到已存在position属性为非static的祖先元素，则默认使用文档视口。
以下是绝对定位的重要属性：
top：设置元素上部边缘距其包含块上部边缘的偏移量right：设置元素右侧边缘距其包含块右侧边缘的偏移量bottom：设置元素下部边缘距其包含块下部边缘的偏移量left：设置元素左侧边缘距其包含块左侧边缘的偏移量z-index：设置定位元素的层叠顺序，即在悬浮区域中重叠的情况下，控制哪个元素位于哪个元素之上
需要注意的是，绝对定位会让定位元素完全脱离文档流，后面的元素就会取代它之前占据的空间。比如，如果页面中本来有一个div元素在该元素的位置上，那么当使用了绝对定位时，这个div会向上移动，给绝对定位元素留下足够的空间以呈现自己。
下面是一个简单的例子：
<div class="container">
<div class="box"></div>
</div>
.container {
position: relative;
height: 200px;
width: 200px;
background-color: #ccc;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
在上例中，我们设置了一个.container容器，并使其中的.box元素相对于.container进行了定位。需要指出的是，在绝对定位中，父级容器也要设置position:relative，否则位置定义不生效。
三、绝对定位元素的嵌套
当一个绝对定位元素被放入另一个绝对定位元素或已经被设置为position属性为非static的父元素中时，会出现两者之间的盒子重叠问题，此时我们需要一个规则来定义它们所在容器的范围。
从概念上讲，定位元素的包含块是最近的祖先元素，该元素已经被定位了。但是，这个规则并不适用于绝对定位元素嵌套，因为其父级元素可能无法提供正常的包含块信息。所以我们使用该元素的最近祖先元素（即position:relative）进行限制。
下面是一个简单的例子：
<div class="container">
<div class="parent">
<div class="child"></div>
</div>
</div>
.container {
position: relative;
height: 200px;
width: 200px;
background-color: #ccc;
}
.parent {
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: #f2f2f2;
}
.child {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: red;
}
在上例中，.child 相对于.parent进行定位。.parent 有一个已被设置为相对位置的祖先容器，因此游离于文档流之外的.child元素可以使用它的祖先作为包含块。
