说说昨天学到的绝对定位和相对定位

前一段时间对于绝对定位和相对定位一直处于模糊状态，可是昨天在新浪上看到一篇文章，讲的很详细，因此就很开心的把它收藏了。

position:relative | absolute | static | fixed

   static(静态) 没有特别的设定，遵循基本的定位规定，不能经过z-index进行层次分级。
   relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置经过 top,bottom,left,right 定位，而且能够经过z-index进行层次分级。
 

   absolute(绝对定位) 脱离文档流，经过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，若是对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，能够经过z-index进行层次分级。
   fixed（固定定位） 这里所固定的参照对像是 可视窗口而并不是是body或是父级元素。可经过z-index进行层次分级。

CSS中定位的层叠分级： z-index: auto | namber;

1.能够位移的元素 （相对定位）

咱们看图中是一个相对定位的元素

#first {
width:200px;
height: 50px;
margin:25px;
border:25px solid #333;
padding:25px;
position:relative;
top: 50px;
left: 50px;
}

而下方是一块默认定位的黑色区块

#second {

width:400px;

height:75px;

margin:0;

border:0;

padding:0;

backgroud-color:#333;

}

咱们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别天然的高于文本流”。除非设置其z-index值为负值,定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么全部的位移的计算将以这个点为基础进行元素的推进。

2.能够在任意一个位置的元素（绝对定位）
相对定位只能够在文本流中进行位置的上下左右的移动，一样存在必定的局限性，虽然他的表现区脱离了文本流，可是在文本流却依然为其保留了一席之地，这就好 比一个打工的人他到了外地，可是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。可是这样很明显就会空出一块空白来，若是但愿文本流抛弃这 个部分就须要用到绝对定位。绝对定位不光脱离了文本流，并且在文本流中也不会给这个绝对定位元素留下专属空位。这就比如是一个工厂里的职位，若是有一个工 人走了天然会要有别的工人来填充这个位置。而移动出去的部分天然也就成为了自由体。绝对定位将能够经过TRBL来设置元素，使之处在任何一个位置。在父层 position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：



上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素天然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，由于那里是他们的被绝对定位后的坐标原点。

3.被关联的绝对定位

实际的应用中咱们经常会须要用到一种特别的形式。即但愿定位元素要有绝对定位的特性，可是又但愿绝对定位的坐标原点能够固定在网页中的某一个点，当这个点 被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说须要这个绝对定位要跟着网页移动，而而且是因定在网页的某一个固定位置。一般当网页是居 中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为 坐标起始点。
虽然是如此，可是这个坐标原点却并非父级的坐标原点，这是一个很奇怪的坐标位置。咱们看一下模型图示：

咱们看到，这个图中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级设置了顶部位移50个像素，左倾位移50个像素。那么咱们看，子级的坐标原点并非从父级的坐标原点位移50个像素，而是从父级块的padding左上边缘点为坐标起始点（即A 点）。而父级这里若是要产生位置移动，或是浏览器窗口大小有所变更都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。

4.总在视线里的元素 （固定定位）

    position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，惟一不一样的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。