关于position的疑惑

我到现在也不是很清楚position的效果会是什么，或者是什么情况下需要指明为relatieve什么情况下又需要absolute呢？

• <div style="position:relatieve" >

  <p data-indent="1"> <span style="position:absolute;left:10px;top10px;" > </span >

   

   </div >

  上面是个例子，当需要指定某元素相对于它的父元素的位置时，使用position

  外元素设置为position:relatieve,内元素设置为position:absolute;

  然后就可以通过left、top、bottom、right设置内部元素相对于外部元素的位置了

   

  • 那我也试了一下：

    父元素为absolute子元素为absolute，效果是两个矩形相互有交集但是不完全覆盖

    父元素为relative子元素为relative，效果是父元素覆盖了子元素

    父元素为absolute子元素为relative时，效果是父元素覆盖了子元素

    父元素为relative子元素为relative，效果是父元素覆盖了子元素

    我现在理解了什么情况下使用position，但是不明白我们如何根据效果来确定是relative还是absolute，您可以再详细一点介绍下吗？谢谢哈