在css中有一个具有强大能力的定位，那就是css属性absolute,为了让其达到我们预想的那样，我们需要对absolute进行限制，今天就谈谈相对定位relative。

1.对top/left/right/bottom的限制定位。

  css规范说，absolute相对定位的是他的最近祖先元素，当没有relative的时候，自然以html为祖先元素，定位top/left之类的相对html进行定位，而当父级元素设置relative的时候，子元素就会被包裹在父级节点内。

2.限制层级。

  (1)当未设置z-index的时候，元素层级是根据dom节点的顺序来排列的，后面覆盖前面。

  (2)当absolute存在的时候，父级无relative的时候，根据absolute设置的z-index来分层，z-index大的在上面。

  (3)父级为relative的时候，并且z-index为auto即不设置，内容是absolute，内容的层级是和子元素的z-index有关。

  (4)当父级为relative的时候，并且z-index不为auto的时候，内容设置absolute属性，此时子元素设置z-index无效，是根据父元素的z-index属性来确定层级的。

3.让absolute在overflow下不固定

  absolute在overflow:hidden中，是不会根据鼠标的滑轮滑动来更改位置的，而当对拥有absolute的子元素给他的父元素添加position:relative的话，此时absolute将不在矫情，跟着滑轮走了。

4.占据原来位置

  当对有relative属性的元素添加top:30px,本身将会上移30px,而下面的元素不会跟着向上移动30px，而是把30px给空出来，这就是relative的不脱离文档流，并且占据位置。当设置margin-top的时候，下面元素会跟上去。

个人见解，欢迎指正。