Position定位

                                                        Position定位

  在参加网页布局的时候我们经常会用到的position定位，那么它到底有几种定位呢？又有什么效果呢？首先我们要规定元素的定位类型，我们也要知道这个定位属性定义的建立元素布局所用的定位机制。

定位的元素可以是任意的，不过绝对定位或固定定位元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它正常的位置中默认位置偏移，目前我们现在一般使用到的只有四个方法。

下面我们来实践一下

1. 相当于窗口绝对定位fixed（）方法，

 首先我们看到的是两个不同位置的元素，而它们的位置是通过position：fixed;方法改变的，移动的位置通过设置top、bottom、left、right四个属性值来决定偏移位置，而设置的值不仅仅是数值、还可以是关键词、百分比、绝对定位。

图文中fixed（）方法给元素生成了绝对定位，而它所生成的绝对定位是相对于浏览器窗口进行定位的，大概可以理为无论你的浏览器页面放大或者放小，它都会根据当前页面大小来进行匹配距离上下左右到底有多长多宽，一般我们只能设置一个上或者下和一个左或者右，再或者单独一个，因为如果同时设置上下或者左右的话页面太大或者大小会无法识别，这就不符合页面布局要求。

  而使用fixed（）方法后是会跟着你的浏览器窗口变化，会发现固定在浏览器窗口的位置上了；
 

1. 绝对定位absolute（）方法，

absolute（）方法也是绝对定位，但是它也是根据当前浏览器定位，唯一不同的是它不会固定在同一浏览器页面上，而是固定在第一次打开的页面上。而 absolute（）方法会根据最近的非static（没有定位）父元素进行定位，如果父元素定位有relative（）方法，它就会根据当前父元素进行定位，它能够配合相对定位relative（）方法联合使用。

3、相对定位relative（）方法，

relative（）方法为相对定位，生成相对定位的元素，相对于其正常位置进行定位

它能够配合绝对定位absolute（）方法使用，对于在一个区域内放不同的样式。还能拼接不同图片或者叠加不同的图片（比如白色背景不同照片位置的-有样式的元素）。