CSS 常用属性笔记——position
1.position 属性
用于设置页面元素的位置，
可以指定下几个值:
1) static: static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定，以DIV做root节点为例：
<head>
<style type="text/css">
div#root
{
width:200px;
height:200px;
background-color: #E0E0E0;
}
div#c1
{
position:static;
width:50px;
height:50px;
background-color: #FF9797;
}
div#c2
{
position:static;
width:50px;
height:50px;
background-color: #C1FFE4;
}
</style>
</head>
<body>
<div id="root">
<div id="c1">c1</div>
<div id="c2">c2</div>
</div>
</body>
效果如下：
position为static，则元素以流形式出现（在下看来好像是竖着接起来），当然，要结合容器父子关系。
2).relative:relative 就是当前元素相对于上一个同级元素（若有）position为static时的位置，或者是直接父容器的当前位置而言（若无同级元素），
请看码：
<head>
<style type="text/css">
div#root
{
width:200px;
height:300px;
background-color: #E0E0E0;
}
div#c1
{
position: static;
top:10px; //对于static而言，指定top，left等似乎毫无用处
width:100px;
height:100px;
background-color: #FF9797;
}
div#c2
{
position: static;
top:10px; //对于static而言，指定top，left等似乎毫无用处
width:100px;
height:100px;
background-color: #C1FFE4;
}
div#c2_1
{
position: relative;
top:10px;
width:45px;
height:45px;
background-color: #FFFF6F;
}
div#c3
{
position:relative;
top:10px;
left:20px;
width:100px;
height:100px;
background-color: #ACD6FF;
}
div#c3_1
{
position:relative;
top:10px;
left:10px;
width:45px;
height:45px;
background-color: #FFFF6F;
border-bottom: 1px solid #000000;
}
div#c3_2
{
position:relative;
top:10px;
left:10px;
width:45px;
height:45px;
background-color: #FFFF6F;
border-bottom: 1px solid #000000;
}
</style>
</head>
<body>
<div id="root">
<div id="c1">c1
</div>
<div id="c2">c2
<div id="c2_1" >c2_1</div>
</div>
<div id="c3">
<div id="c3_1" >c3_1</div>
<div id="c3_2" >c3_2</div>
</div>
</div>
</body>
效果如下：
对于C2_1而言，它有上一个同级元素c2字符串，指定top为10px，则其意为c2_1的top离c2字符串10px；
对于c3而言，它有上一个同级元素c2，与c2_1类似。
对于c3_1,它没有同级元素，所以top：10px；left：10px；是相对于c3当前位置而言(建议改div#c3里的position为static试一试)， 而对于c3_2，它有上一个同级元素c3_1，其top：10px；left：10px；是相对于c3_1 position指定为static时的位置而言的，但又由于position为static时top：10px；left：10px；根本无效（相当于top：0px；left：0px；），所以变成上图情况。
3）absolute，absolute绝对定位，“绝对”是对比relative而言来说的，绝对定位是相对于其定位好的（position指定除static以外的值）上一级父容器（一级一级上），如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素，绝对定位不用看同级的元素。
打码如下：
<head>
<style type="text/css">
body
{
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
div#root
{
position: static; //父div position 为static 或干脆不指定时，就不能称其为 “定位好的”
width:200px;
height:300px;
background-color: #E0E0E0;
}
div#c1
{
position: absolute;
top : 10px;
width:100px;
height:100px;
background-color: #FF9797;
}
</style>
</head>
<body>
<div id="root">
<div id="c1">c1
</div>
</div>
</body>
c1的直接父容器是root，但root不是定位好的，在往上就是body，但body也是没有明确定位的，所以此处c1的定位好的父容器没有，因此此处c1的top：10px只能相对于<html>元素而言：
由上图示例看出，c1没看root 和body的脸色（因为定位不明确），而直接向<html>看齐。若给body或则root指定position除static以外的值，c1的top：10px是相对于做了明确定位的body或root来说的，结果如下：
4)fixed, fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。
将上面absolute的代码修改一下，div#root和div#c1如下：
div#root
{
position: absolute;
top :40px;
width: 200px;
height: 300px;
background-color: #E0E0E0;
}
div#c1
{
position: fixed;
top:35px;
left:35px;
width:100px;
height:100px;
background-color: #FF9797;
}
