CSS布局之【Position】属性

在DIV+CSS布局中，该属性是决定当前元素以什么样的方式存在浏览器中，有以下4个值：

    1. static: 默认值，浏览器按照正常流摆放该元素。

    2. relative: 相对定位

    3. absolute: 绝对定位

    4. fixed:相对于浏览器窗口定位

这是什么鬼，一头雾水，不急，不急，下面依次进行解释，分析。

一、static

    浏览器默认的定位方式，可能你也不知道默认定位方式是什么东东。首先要知道整个html元素可以分为两大类“行内元素”，“块元素”，区别自己百度，浏览器在呈现HTML文档时候，依次读取其中元素，从左到右，由上而下依次呈现读取的各个元素。当遇到行内元素是，就在本行挨着显示，当遇到块元素，那么就换一行显示，显示完这个块元素立即换行，也就是说块元素要占单独一行。

    在说通俗一点，就像是在一个黑板上贴纸一样，从左到右，从上到下依次贴，只是有的纸可以从左到右挨着贴，而有的纸左右不能有别的纸，独占一行。

二、relative：相对定位

    在static基础上，元素可以在当前位置左右，上下移动而周围元素位置保持不变。就相当在按照默认方式贴好纸，然后将某张纸扯起来，然后在贴在原来的位置附近，不管附近是否有其它元素。当然很有可能覆盖其它元素或者被其他元素覆盖，取决于z-index的值，越大就越在上面，下面通过图来说明。

    图一：正常流显示三排元素（使用DIV块元素，但设置其display:inline-block，将其可以再一行显示，在通过br元素进行换行）

图一

    图二：将第二行的第三个元素设置属性position:relative,此时，该元素就是可以移动的了，然后再设置移动偏移量，top=-20px,left=-100px。结果就是，元素在原来的位置上向上移动20像素上，向左移动100像素。

图二

    那么，元素如何根据偏移值是如何进行移动的，如果比较清楚可省略该处

        首先，偏移值属性有[ left,right],[ top,bottom]，第一组表示在X方向上偏移，第二组表示在Y方向上偏移。注意都是相对与原来位置的偏移。他们的值可以为正，也可以为负，也可以为百分数。各个属性含义如下：

        left    => 表示偏移后左边离原来位置左边的距离，正值表示向右移动，负值表示向左移动

        right   => 表示偏移后右边离原来右边的距离，    正值表示想左移动，负值表示向右移动

        top     => 表示偏移后上边离原来上边的距离，    正值表示向下移动，负值表示向上移动

        bottom  => 表示偏移后下边离原来下边的距离，    正值表示想上移动，负值表示向下移动

        可以看出，left和right,top和bottom其实达到的效果是一样的，所以多数时候使用left,top进行定位

        上面说了，属性的值可以是百分数，该百分数对应的基数就是该元素父元素的宽和高值，如果没有指定父元素的宽度和高度，此时该如何显示。我试验的出的结果，在X方向上移动当前父元素实际值的50%，在Y方向上位置不变。

三、absolute

    如果说relative是将贴在扯起来贴在原来位置周围，那么absulte的意思就是不仅仅是将其扯起来，同时，他原来的位置被周围元素按照正常流给占据，可以理解被同伴们抛弃了，此时，被抛弃的absolute就自己去找位置，从当前父元素开始，依次向节点往上（父元素=>爷爷元素=>...），找能容纳他的第一个父元素（必须是直系）重新贴上。他也不是随便找个父元素就可以，他接受的父元素Position必须被定义为relative或者absolute，但是这里我们一般定义父元素为relative。同样我们通过 [ left,right],[ top,bottom]进行相对与父元素定位，下面通过图来进行演示位置变化。

1. 父元素查找：

图一

    图一，为原始位置，正常流，我们要观察的是绿色条的变化。先知道其父元素依次为"div1=>div=>body=>html"现在将其设置为position:absolute;其它不变。

图二

    图二，可以看到，我们虽然设置绿色为absolute,但是绿色位置并没有变化，只是灰色的条目不见了，其实，它是在绿色下面，也就说明，我们绿色被抛弃了，可是为什么被抛弃了还处于原处，没有去寻找可以依靠的父元素呢，是因为，我们并没有设置偏移值，此时，他就算找到可靠父元素，也不知道应该处于父元素什么位置。他就原封不动的漂浮在别的元素上。

图三

    图三，给绿色代表设置top=0px 去寻找父元素。可以看出，我们的绿色代表一直在寻找可以依靠的父元素，可是所有的父元素都是static，这是没办法，只能停靠在浏览器边缘。

图四

    图四，将父容器div设置position:relatev, 我们看出他停靠在父容器div的边缘

图五

    图五， 将父容器div1设置position:relative此时，我们绿色代表脱离了父容器div,而是选择离自己原来位置较近的父容器div1边缘上，说明他找到第一个可靠父元素后就不再进行寻找。

  2.定位：

    以上，都是设置了top:0px，只是设置了Y方向偏移,并没有设置X方向上偏移，在X方向上保持原来的位置，下面对定位进行说明。

图六

    图六，在同时设置了X偏移后（left:0px）Y偏移（top:0px），绿色代表有了新的位置，绿色代表左边线与父元素的左边线重合,上边线与父容器上边线重合。

            在relative中介绍了定位参数的含义。在这里我们对position的偏移参数进行说明，

                left  => 表示移动元素左边框距离父元素左边框的距离;

                right => 表示移动元素右边框距离父元素右边框的距离;

                top   => 表示移动元素上边框距离父元素上边框的距离;

                bottom => 表示移动元素下边框距离父元素下边框的距离;

            这里和relative得偏移参数是一样的道理，只是相对对象不一样，一个是对于自身原来的位置而言，一个是对于可靠父元素而言。还要注意的是他们是边框与边框的距离。

            当一个固定高宽的移动元素，在同时设置了left和right元素，left为准；同时设置了top和bottom时以top为准;（可以自己试验）

            当一个不固定高宽移动元素，在同时设置四个参数时，他会将移动元素左右，上下拉伸，直到合适的位置如下图设置top10px;bottom:20px;right:20px;left:30px;

图七

    图7，对绿色代表进行了上下左右的偏移设置，此时绿色代表必须是高宽都为auto值。其他情况可以自己试验。

四、fixed

    固定，相对于当前浏览器可视窗口固定，就相当与很多网页左右两边的广告一样。不管你如何滚动鼠标滑轮，它都那个位置。同样可以设置top,bottom,left,right来固定其位置，用法和position:absolute是一样，只是fixed相对的对象是当前可视窗口。

ps: 以上都是个人见解，若有疑问，或者错误地方，或者不清楚的地方，望指出进行讨论。