关于css的position:relative和absolute属性

1.红线区域内的position:relative;的作用是什么？为什么要加？

2.下面的position:absolute;是相对于浏览器呢？还是相对于h2？
absolute的绝对定位是相对于父容器？

3.单纯设置position，而不设置left和top属性，是说让left和top的值默认为0吗？

4.网上说父容器的relative是为了让子容器的absolute有效果，单纯的给h2的span加上absolute不会有绝对定位效果。
我试了一下，在上述代码中，去掉h2里面的relative，是可以正常显示的
但是如果把h2 span的width值修改一下，比如改成20%，那么会有下面的情况
h2中加入了relative:width的宽度正常显示
h2中不加：width宽度就不会按要求显示
(为方便观察我给h2 span加了一个border:1px solid red;)
效果如图

另外还有如果背景图的路径为空或者不存在，那么他的外围容器
就像上面的span，即使设置了width:100%，那么他的实际宽度也为0，是这样理解吗？

绝对定位相对谁来定位？这是楼主真正想问的。
绝对定位元素相对于“定位包含框”来定位。定位包含框就是被定义了绝对定位或者相对定位的包含块。
如果绝对定位元素的父元素没有被定义为定位样式，那么就继续向外层寻找，直至找到为止。所以它的定位
对象是“就近”的。你问的问题就是相对h2来定位的。
另外，绝对定位的元素有一个和浮动非常相似的性质，就是在未定义宽高的情况下，会紧紧包裹其内部元素。