CSS定位

1.position:absolute/relative的区别与应用

应用：子绝父相
absolute（ 绝对的）绝对定位，是在层级关系上，离自己最近的父级，设有positon：relative（相对的）的左上角进行定位。如果祖代元素中，没有relative相对定位的元素，就默认相对于body定位。

补充解释：
relative相对定位，是相对于元素自己本身原来的位置，进行定位，用left/right/top/bottom定位。本元素并没有脱离文档流，还占有原来的空间。

2.position:absolute/relative是否在文档流中

absolute绝对定位，是脱离文档流的， 与浮动float：left/right浮动定位一样的效果。注意：浮动定位是压在绝对定位的元素之上的。可以设置z-index，值小的更靠近用户的实现，值大的压在下面，默认值为auto。

relative相对定位，没有脱离文档流。使之脱离文档流的方法：设置z-index。使本元素相对于文档流中的元素层叠，或者脱离文档流。

3.应用代码示例

<div id="frame">
      <div id="pohots" class="play">
        <img src="http://www.jq22.com/img/cs/500x300-1.png" alt="">
        <img src="http://www.jq22.com/img/cs/500x300-2.png" alt="">
        <img src="http://www.jq22.com/img/cs/500x300-3.png" alt="">
        <img src="http://www.jq22.com/img/cs/500x300-4.png" alt="">
        <ul id="dis">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>

在外面套个盒子

    .box {
      position: relative;
      left: 50%;
      margin-left: -150px;

    }