定位

Relative 相对定位：

1.    移动时，参照自身原来的位置

2.    元素移动之后依然占据移动位置

3.    如下图：

 

Absolute 绝对定位：（通常用 relative作为参照物）

       注：给有给偏移量的时候：

              1.前面有元素挡住的时候，所有定位的元素会重叠在该元素后面

              2.没有元素挡住的时候，会在left:0px right:0px 的位置

1.    当父级元素里没有定位属性（position）的时候，相对于body移动

2.    当父级元素里有定位属性（position）的时候，相对于第一个遇到的有定位属性的父级移动

3.    使元素脱离普通的文档流 提高一个层级

4.    不能相对于兄弟元素或其他元素

5.    万能居中：

a)     添加三个属性：(左右居中)

                         i.         Left:0px

                        ii.         Right:0px

                       iii.         Margin:0 auto;

b)     添加五个属性：（上下左右居中）

注：元素要固定宽度、高度

                         i.         Left:0px;

                        ii.         Right:0px;

                       iii.         Top:0px;

                       iv.         Bottom:0px;

                        v.         Margin:auto;

Fixed 固定定位：

1.    相对浏览器窗口

2.    脱离文档流

Static 默认值（没有任何定位特征）

 

z-index 层级关系：层级属性（取值：可以是正和负数，不需要单位）

              注：1 当子级元素的z-index值为负的时候如果父父级没有z-index的属性，那么所有的子级元素都会显示在父级之下

                     2当父级有z-index 的值的时候 ，无论子级的z-index是否为负数，那么一直是显示在父级元素之上

                     3如下图：

                    

 

1.    默认情况下 ，结构顺序越靠后 层级越高

2.    z-index:的值越大层级越高

3.    层级 1 比所有默认层级都要高