三种定位方法与元素层级构建详解

定位：

定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

通过position属性来设置元素的定位

可选值：

         relative：开启元素的相对定位     

         absolute：开启元素的绝对定位 

         fixed：开启元素的固定定位（也是绝对定位的一种）

当定位开启后，偏移量才好使

当开启了元素的定位以后，不设置偏移量时，元素不会发生任何变化

偏移量一般设2个：水平的一个与垂直的一个

偏移量相对于元素在文档流中原来的位置进行定位 ：

                 left：元素相对于其定位位置的左侧偏移量 

                 right：元素相对于其定位位置的右侧偏移量 

                 top：元素相对于其定位位置的上边的偏移量

                 bottom：元素相对于其定位位置下边的偏移量

    一、 相对定位：

1、当position属性设置为relative时，则开启了元素的相对定位

2、相对定位开启后不会脱离文档流

3、相对定位是相对于元素在文档流中原来的位置进行定位

4、相对定位不会改变元素性质

5、相对定位会使元素提升一个层级

6、当开启了元素的相对定位以后，不设置偏移量时，元素不会发生任何变化

    二、绝对定位：

1、当position属性值设置为absolute时，则开启了元素的绝对定位

2、开启绝对定位，会脱离文档流

3、绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（如果子元素的绝对定位开启了，父元素的相对定位同时开启）

4、绝对定位相对于祖先元素开启定位，并且是离其最近的祖先元素；如果没有则会相对于浏览器窗口进行定位（绝大多数参照父亲元素定位）

5、绝对定位会改变元素的性质：

                                    内联元素变成块元素

                                    块元素的宽度和高度默认都被内容撑开

6、开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

7、绝对定位会使元素提升一个层级

    三、固定定位：

1、当position属性设置fixed时，则开启了元素的固定定位

2、IE6不支持固定定位

3、固定定位会脱离文档流

4、参照屏幕定位

5、固定定位会改变元素的性质：

                                    内联元素变成块元素

                                    块元素的宽度和高度默认都被内容撑开

与固定定位不同点：

                  1、  固定定位永远都会相对于浏览器窗口进行定位

                  2、  固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

元素层级：

z-index属性设置元素的层级

1、没有开启定位的元素不能使用z-index

                    开启定位，相对定位或是绝对定位任意一个都可以

                    兄弟层级：谁z-index高谁在上面

                    父子层级：子元素永远在上面，父元素永远在下面

                    数越大离“你”越近，越在上面

2、z-index指定一个正整数作为值，该值作为当前元素的层级，数越大、层级越高，越优先显示

3、如果定位元素的层级是一样，下边的元素会盖住上边的z-index属性用来设置元素的层级

设置元素的透明背景：opacity

opacity可以用来设置元素背景的透明（0-1之间的值）：

                            0 表示完全透明 

                            0.5 表示半透明

                            1 表示完全不透明 

opacity属性在IE8及以下的浏览器中不支持

IE8及以下的浏览器需要使用filter：alpha(opacity=透明度)；属性代替（I这种效果支持IE6，在IE Tester中无法测试）

透明度（0-100之间的值）：  

                            0 表示完全透明 

                            50 半透明

                            100 表示完全不透明