小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
相对定位(relative)
相对定位是指以元素默认位置为起点，移动元素到一个新的位置，此时的top,left,right,bottom都是相对于元素默认位置计算的。
绝对定位(absolute)
绝对定位是以父元素的位置作为起点计算的，且父元素必须是被定位过的(所以绝对定位是作用在子元素上的)，如果父元素未被定位过，就看父元素的父元素是否被定位过，直至找到一个被定位过的祖先，若找遍了都没有，就以整个窗口body为父元素。
固定定位(fixed)
它可以不随页面滚动而移动。 使用：
position:fixed;
left:20px <!--调整该元素固定位置距左侧距离-->
元素因为定位重叠的时候，z-index的值越大越靠上显示。
示例：伤心小人
DOM结构
<figure class="man">
<div class="head"></div>
<div class="body"></div>
<div class="feet"></div>
</figure>
.man使用相对定位position:relative,3个子元素都使用绝对定位position:absolute,用.feet::before和.feet::after两个伪元素表示两只脚。
<style type="text/css">
.man{
width: 12em;
height: 33em;
font-size: 10px;
position: relative;
color: gray;
margin: 5em;
}
.head{
position: absolute;
width: 7em;
height: 7em;
background-color: currentcolor;
border-radius: 50%;
right: 0;
}
.body{
position: absolute;
width: 6.2em;
height: 14.4em;
background-color: currentcolor;
top: 7em;
border-radius: 100% 20% 0 0;
}
.feet::before,
.feet::after {
content: "";
position: absolute;
width: 4em;
height: 1.4em;
background-color: currentcolor;
bottom: 0;
left: -1.6em;
border-radius: 1em 80% 0.4em 0.4em;
}
.feet::after{
transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
}
</style>
transform属性可以把元素平移，旋转，缩放，扭曲等
平移函数translate()
水平平移：translateX(0.5em)【沿水平方向移动0.5em】
垂直平移：translateY(50%) 【值是百分比的话，定位是以父元素为100%进行计算，但translate是以自身尺寸为100%进行计算的】
旋转函数:rotate(),它接收一个角度值参数，表示元素被旋转的角度(用正负表示顺逆时针旋转)
