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;
}
相关推荐
CSS常用属性和属性大全,CSS常用属性和属性大全,CSS常用属性和属性大全
css常用属性
详细的汇总了CSS常用属性，css+div配合。适合初学者或或以适应着查询。
本文档包含了所有的CSS常用的属性。每一个属性都有详细的说明。
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分：第1部分是HTML/CSS基础和CSS 3新特性演示，涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...
HTML CSS——position学习终结者(二).zip 欢迎下载！！！
css常用属性文档集css常用属性文档集css常用属性文档集css常用属性文档集css常用属性文档集css常用属性文档集css常用属性文档集css常用属性文档集css常用属性文档集css常用属性文档集css常用属性文档集css常用属性...
本文档为pdf格式文件，里面是一张思维导图，总结了CSS常用属性和值以及其他的特点。有助于学习者很快的额理清楚这部分的知识架构，文档清淅明了简单易懂。花了好大功夫写的，很详细的，欢迎下载哈。
CSS常用属性整理.pdf
描述了CSS中的属性代码，条理清晰，方便大家阅读。。。。
各类css常用属性 大全 各类css常用属性 大全
CSS/DIV实例——初学者，很简单的一看就懂。
别具光芒——CSS属性、浏览器兼容
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
这个笔记是在学习精通CSS时写下的，由于要写js，所以对CSS的要求就非常高，希望有帮助。
CSS常用属性，CSS所有属性!!CSS常用属性，CSS所有属性!!
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
让人食欲大振的HTML5 & CSS3 网站模板—— Deliccio，适合餐饮行业作为展示窗口，配色让人垂涎欲滴。建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发~~~