Div+Css网页布局之定位篇--Postion属性详解
Div+Css网页布局一直以来是用Css制作网站的精华，一个好的网站多半 是由于其合理而有意义的布局使得网站更具表现力。
正由于其是精华因此它也成为了Css学习的一个重点和难点。特别是用Position 属性布局的问题一直是Css新手的一个难点，因为绝对定位和相对定位的书面解释语通常说得比较抽象，并且里面包含一些专业术语，因此初学者看起来会比较吃 力，比较难懂。
因此我在此所谈论的是在列出书面表达的同时，用图片和实际情况给大家一种更加直观明了的介绍，这样可以让大家从根本上理解和巩固Position的含义。 当你真正理解了Position属性的定义之后，我相信聪明的你定可以将Position属性运用得游刃有余，那时结合Position属性进行网页布局 已不再话下。
定位方式之一 ： Position 定位
position : static | absolute | fixed | relative
取值：
static : 默认值。无特殊定位，对象遵循HTML定位规则；
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象 进行绝对定位。如果不存在这样的父 对象，则依据 body 对象。而其层叠通过 z-index 属性定义；
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范；
relative : 对象不可层叠 ，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置；
Left : 检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
Right : 检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
Top : 检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
Bottom : 检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。
Absolute:
在Absolute的官方解释语中出现了2个专业用语，一个是文本流，一个是父对象，很明显，要想理解 absolutely的定义就必须得了解文本流和父对象的含义。
文本流 :一系列字符，可以由多行构成，每行由一个换行符终止。在HTML中字符也就是html文档显示的元素（文字，图片，视频等），可将文本流抽象理解为整个 html页面元素的排版方式。
父对象（也称父级对象） : 在Css官方语言中并未明确给出父对象到底是个什么概念，说得比较笼统，形象的也就是当B嵌套在A中时，A就是父级对象，B就是子级对象，就好像是A把B 生出来的一样。
<div id=”A”> <div id=”B”></div> </div>
现在我们再回过头来看Absolute。在CSS中，它的写法是： position: absolute; 他的意思是绝对定位，那到底怎么来理解“绝对”这两个字呢？我们先来看两个例子：
1. 研究没有父级或父级未定义position 的情况：
创建一个html文档，定义一个div，并为它写下以下属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#test1 {
position:absolute;
width:200px;
height:200px;
border:10px solid #000000;
}
</style>
</head>
<body>
<div id="test1"></div>
</body>
</html>
（图片1）
很明显在没有任何其他元素干扰下他是参照html页面默认的margin处开始定位的（非浏览器的左上角，浏览器 的左上角再Address的A处） ，也就是body。那么我们怎么配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)来进行定 位呢？
我们继续为叫做text1的div进行以下定义：
#test1 {
position:absolute;
width:200px;
height:200px;
border:10px solid #000000;
top:50px;
left:50px;
}
（图片2）
如果设定TRBL并且没有父级或父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始 点进行定位，位置将由TRBL决定。
2. 研究具有父级对象并且父级对象设定了position属性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
margin:0;
color:#FFFFFF;}
#test0 {
width:270px;
height:50px;
}
#test1 {
position:absolute;
width:200px;
height:200px;
border:10px solid #000000;
top:50px;
left:50px;}
#test2 {
position:absolute;
border:10px solid #BFA800;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="test0">我是默认定位，没有margin/padding/border不受定位影响</div>
<div id="test1">
<div id="test2">我是子对象，大家注意看我的位置变化</div></div>
</body>
</html>
（图片3）
在这个例子中大家可以很明显的看出父级对象是个什么意思了吧！说得更直观一点，父子对象关系就是当B嵌套在A中时，A就 是父级对象，B就是子级对象，就好像是A把B生出来的一样。
那我们来看看当为名叫test2的子对象加上了TRBL是，它的移动和没有父对象的时候是否一样呢？
我们为test2定义如下：
#test2 {
position:absolute;
border:10px solid #BFA800;
width:100px;
height:100px;
top:20px;
left:20px;
}
(图片4)
很明显，移动规则仍然是参照原始点进行移动。
而关于z-index层叠问题就更好理解了，当两个div重叠时候，z-index的值越大层叠就越靠前（前提是两个div都拥有position属 性）.同时理解“大”的含义，-1比-2要大，通过数轴进行比较(z轴)。
通过这2个例子，我们完全可以很好的理解绝对定位absolute的意思，总结可以说为：
它是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定 TRBL，默认依据父级的做标原始点为原始点。如果设定有TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为 原始点进行定位，位置将由TRBL决定。
明白了之后相信大家可以理解为什么行家们多说“网页居中的话用Absolute就容易出错”这句话了吧？！因为网页一直 是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会因为分辨率的变化而变化位置。
在此我们不紧明白了absolute的用法，而且还看见了一个很明显的问题，那就是绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留 下专属空位，这就好比是一个工厂里的工人，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以 通过TRBL来设置元素处在任何一个位置。
那么相对定位呢？相对定位只可以在文本流中进行位置的上下左右的移动，但存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一 席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希 望文本流抛弃这个部分就需要用到绝对定位。
看完了这两段话后你肯定会有点摸不着头脑，不要紧我们就借由这个疑问来讨论一下相对定位的用法，同样我们还是举两个例子来看看，当你看完了例子再回过头来 看上面的两段话你会理解得非常清楚，并可以知道绝对定位和相对定位的差别。
Relative:
Relative，Css中的写法是：position: relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以body的原始点为原始点，配合TRBL进行定位，当父级内有padding等Css属性 时，当前级的原始点则参照父级内容区的原始点进行定位。
看完这段话后大家是否觉得很熟悉呢？对，其实绝对定位和相对定位的定位标准都是一样的，都是“参照父级的原始点为原始点，无父级则以body的原始点为原 始点，配合TRBL进行定位”，他们只是在实际运用情况中会有一些不同，下面的例子就是来解决这些疑惑的，当你了解了这些不同之处以后，你就能非常熟练的 运用position定位了。
1.研究没有父级或父级未定义position的情况：
由于与absolute的定位方式一样，因此只需将absolute例子中absolute相应的改变为relative即可，在此我就不在赘述。
2. 研究具有父级对象并且父级对象设定了position属性：
我们先来看看所有div都不加position属性的情况：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
margin:0;
color:#FFFFFF;}
#test0 {
width:270px;
height:50px;
}
#test1 {
width:200px;
height:200px;
border:10px solid #000000;
}
#test2 {
border:10px solid #BFA800;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="test1">
<div id="test2">我是子对象，大家注意看我的位置变化</div>
</div>
<div id="test0">我是参考div，没有margin/padding/border不受定位影响</div>
</body>
</html>
（图片5）
此处我把参考div放在了测试div的下面，大家想想，如果我把名叫test1的父级加上一个position：absolute，会发生什么变化呢？ 对，参考div的左上角会跑到test1的左上角，也就是浏览器的左上角。
（图片6）
大家再想想，如果我把名叫test1的父级加上一个position：relative，会发生什么变化呢？
#test1 {
position:relative;
width:200px;
height:200px;
border:10px solid #000000;
}
为了大家看的更明显，我们为test1加上TRBL：
#test1 {
position:relative;
width:200px;
height:200px;
border:10px solid #000000;
top:150px;
left:300px;
}
（图片7）
大家可以看到，参考div的位置并未随着test的移动而移动，它依然处于原位置，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了原本的位 置，很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位。因此在实际运用中要特别注意这点，根据你所要的效果来决定是否留下空白区 域。
现在再去看看关于那个打工人的比喻，现在是不是可以很好的理解了呢？
现在你了解相对定位的含义以及相对定位和绝对定位的区别了吧。
相互关联的定位:
上面说的是单一的绝对定位或相对定位，而在实际的应用中我们常常会需要用到一种特别的形式——相对定位和绝对定位的混合使用。
那么我们就以下面的例子来巩固一下上面所学的2种定位吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
margin:0;
color:#FFFFFF;}
#test1 {
position:relative;
width:200px;
height:200px;
border:10px solid #000000;
top:50px;
left:50px;}
#test2 {
position:absolute;
border:10px solid #BFA800;
width:100px;
height:100px;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div id="test1">
<div id="test2">我是子对象，大家注意看我的位置变化</div>
</div>
</body>
</html>
这时候子对象test2即有绝对定位的特性有包含相对定位的特点，父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素 与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。
这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话，相信看完对这里对定位的解释一定可以把定位使用得随心所欲。
Fixed:
由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己在 浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。为了不使本文变成冗长的大论这里只是简要告诉大家它的含义关于fixed 属性的实例的一些问题大家可以上百度或者Google查找并分析一下，很容易理解的。有不理解的地方可以给我留言！
总结：相信大家看完了这篇文章后一定会对position属性有一个更高的了解了吧，希望今后你可以挥洒自如的运用这个属性进行定位。
14、区别display和visibility
display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。
而display:none则相当把元素从页面中去除，其占用位置也将被删除。
