08 ­ 第八章：定位

相对定位

CSS position属性用于指定一个元素在文档中的定位方式。 top ， right ，bottom 和 left 属
性则决定了该元素的最终位置。
相对定位

.box1{
      position:relative;/*relative = 相对的意思*/
      left:50px;
      }
      <ul class='wrap'>
        <li class='box1'>
        <li class='box2'>
      </ul>

定义：
相对于元素没有定位之前的位置进行位移！

注意：relative给百分比的问题,父级没有高度的时候，百分比不起作用！

特性

1.不使元素脱离文档流 文档流：正常元素的流体布局，从上至下 这里有两种说法，一种占文档流
自身的位置还在 一种不占文档流确实层级比较高 可以理解成占据自己的位置 同时提高了层级
2.不影响元素本身特性，行内还是行内，块级还是块级

绝对定位

相对于已经定位的父元素进行定位
特性

1.完全脱离文档流
2.行内元素支持宽高
3.块级元素内容撑开宽高

  <li class='box'></li>
  </li>
  </li>

4.没有祖先元素则相对于body
5.一般配合相对定位使用
6.绝对定位的元素的位置相对于最近的已定位祖先元素
7.margin:auto;失效

扩展 ­ 如何使一个盒子在页面中百分之百居中呢？

  /*第一种方法*/
  position:absolute;
  top:50%;
  left:50%;
  margin:-100px 0 0 -100px;
  /*第二种方法*/
  margin:auto;
  position:absolute;
  top:0;
  eft:0;
  right:0;
  bottom:0;

固定定位 fixed

相对浏览器窗口定位！

z­index

1.z­index 可以调换两个层的上下位置关系
2.值可以为正，也可以为负，值越大，越在上面 默认值=0
3.只能同级元素对比 你在大楼里面，你自己不能和大楼比谁高！
4.z­index:只对定位的元素有效，其它元素均无效