Postion定位的使用

Postion定位的使用

一、概要

position属性有四个值：static、relative、absolute、fixed。
staitc：默认值，默认效果
relative：相对定位，使用较多
absolute：绝对定位，使用较多
fixed：绝对定位，较少使用

二、效果

网络上有关css定位的实验较多，在这里就不例举代码说明，只介绍相关结论。

staitc：

默认值，显示的是默认效果，无需其他说明。

relative：

相对定位，当div使用该属性后，该div并不会脱离文档流，占有div原有的位置。如果再使用在使用position=relative的同时又指定top与left属性，则该div会以原先的位置为基点进行偏移定位。

在该图片中，灰色部分的div position设置relative，left与top的偏移量分别设置为50px，故现在的div是以未进行relative设置原先的div进行偏移的。所以偏移量也就是红色矩形，长宽均为50px；

absolute

该属性最为常用，且常常配合这relative一起使用
absolute为绝对定位，div使用该属性后，脱离文档流，就像设置浮动一样。如果设置absolute的同时又设置top与left属性，则向上找，找到第一个position不为static的父div为基准设置偏移

在此实例中，棕色部分设置了relatvie，天蓝色部分设置了absolute，子div的top与left是以棕色部分的div为基准进行偏移。红色矩形部门长宽均为40px；如果父div没有设置relative，在此示例中则以body为基准进行偏移。如下所示

以body为基准进行偏移，红色矩形，为偏移量，长宽均为40px;