css中position定位

Position在页面布局中由十分重要的作用。利用position定位和z-index值的设定可以对文档进行分层。对页面样式有了更好的渲染。（只有在进行了定位后z-index值才会有效果）
目前几乎所有主流的浏览器都支持position属性（”inherit”除外，”inherit”不支持所有包括IE8和之前版本IE浏览器）。position可能的值有以下五种。

其中最常用的三种定位为absolute、relative和fixed。
当没有进行定位时为默认值static。而relative与absolute结合的定位方式也越来越多的运用在页面当中。

1、absolute（绝对定位）
absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。
关于absolute定位我看到了一种说法说在没有对TRBL进行设定时，实际是未脱离文档流的只是丢失了宽高。但是经过试验发现即使为设定TRBL而是用margin值进行定位时，这种定位方式仍然使得元素脱离了文档流。
下面来看一个关于position定位的例子：

html：

<div id="introduce">            <div id="tsct">                <img src="img/tsct.png">            </div>            <div id="module1">                <h1>港囧</h1>                <h5>《港囧》是由北京真乐道文化传播有限公司、北京光线影业有限公司等联合出品的爱情喜剧影片，该影片由徐峥执导，由徐峥、赵薇、包贝尔、杜鹃、葛民辉联合主演。影片于2015年9月25日在全国上映。影片讲述了徐来陪伴老婆及家人来到香港旅游，计划与大学初恋杨伊偷偷会面，无奈被小舅子识破其醉翁之意不在酒，从而引发一场欢乐香港游的囧途的故事。                <a href="#"> >>></a>                </h5>            </div>            <div id="module2">                <h5>                <a href="#" class="gray">信&nbsp;&nbsp;&nbsp;息</a>&nbsp;&nbsp;&nbsp;中国大陆 | 114分钟 | 2015年9月25日<br/>                <a href="#" class="gray">导&nbsp;&nbsp;&nbsp;演</a>&nbsp;&nbsp;&nbsp;徐峥<br/>                <a href="#" class="gray">类&nbsp;&nbsp;&nbsp;型</a>&nbsp;&nbsp;&nbsp;喜剧                </h5>            </div>            <div id="ygp">               <p>预告片<p>               <a href="http://www.iqiyi.com/v_19rrnn4jpg.html?vfm=m_127_bdbk" target="_blank">                    <img src="img/ygp.png" />               <a>                    </div>        </div>

css：

#module1{    top: 215px;    position: absolute;    left: 130px;    width:560px;    height:165px;    border-bottom:1px #999 solid;}

效果图：

其中module1那个div块就是相对于其父元素introuduce进行定位的。

2、relative（相对定位）
relative是相对的意思，顾名思义就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。

这种定位方式用在伪类a:hover中会有很棒的效果。

css：

#mz a{        display: block;        width: 80px;        height: 80px;        background:url(image/Sorting-Hat.png);        background-size:cover;     }    #mz a:hover{        position: relative;        margin-left: 30px;        display: block;        width: 128px;        height: 128px;        background:url(image/Sorting-Hat.png);        background-size:cover;     }

html代码：

<a id="mz"></a>

效果图如下：

鼠标放上去就会变成：

图标就会较原来位置有明显移动。如果用得好可以有很棒的效果。
3、fixed（绝对定位）
fixed用于生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
html：

    <div id="share">            <p>分享</p>            <div  id="qzone">                <a href="#" target="_blank"></a>            </div>            <div  id="sina">                <a href="#" target="_blank"></a>            </div>            <div  id="tencent">                <a href="#" target="_blank"></a>            </div>            <div  id="other">                <a href="#" target="_blank"></a>            </div>        </div>

css：

#share{    position: fixed;                 /*相对于浏览器的定位*/    width: 48px;    height: 203px;    z-index:50;    top:210px;    right:0px;    background：#F5F5F5；}

效果图：

share模块将会随着滚动条的滚动滚动变换位置，始终保持在屏幕的固定位置。

下面将讨论在绝对定位中关于参照点的问题。

<div id="banner">               <a href="#" target="_blank" >                  <img src="img/dring.png" />               </a>            </div>

css：

#banner{    z-index: 60;    position: absolute;      /*绝对定位时bottom属性的参照点是浏览器的第一屏(就是没有移动滚动条的时候)的可视区域的下边缘。*/    height:100px;    width:960px;    bottom: 170px;    left: 200px;}

效果图：

可见这里的bottom值是相对于页面可视区域的第一幕页面而非整个页面的。而且拖动滚动条不会有变化。

但是只要对css文本进行一些修改就可以达到相对整个页面布局的效果。
给body加上动态定位。

body{    position: relative;     /*如果显示的把body设为动态定位，例如相对定位，那么bottom的参照点就是整个body区域的下边缘，而不是浏览器可视区域的下边缘*/}

现在效果图如下：

用bottom来进行绝对定位时，要知道它的参照点是浏览器的第一屏(就是没有移动滚动条的时候)的可视区域的下边缘，而不是整个页面的下边缘。所以做多页面的footer时慎用bottom定位。