Demo如下：https://jsfiddle.net/y4okbek1/6/
如果把div1的position换成absolute就会得到这个标签的大小，为什么relative不行？
说说我个人的理解吧position: absolute相对于最近非static父元素定位，top bottom left right是各个边到其最近的非static父元素的距离，这里就是html了，当设置
position: absolute;
top:50px;
bottom:100px;
left:50px;
right:50px;
就给这个div设定了到各个边界的距离，从而相当于设置了width height，给它设置了背景色，所以看着这个div有大小了，ps.这时候这个div形成了一个BFC
position: relative相对于自身的位置定位，几次试验证明，当同时给定位为relative的元素设置top bottom，起作用的是top，left right中起作用的是left，至于为什么？可能是标准规定，也可能是浏览器实现的原因。
此时，这个div也是有大小的，未给div1设置width height,其width与父元素相同，而height由子元素撑起来，所以，div1的大小和div2的大小是一样的，只是div2设置了背景蓝色，覆盖了div1，“看”不到而已。如果把div2的width设置为50%，效果会明显点
补充：
MDN上有这样一段描述：
Except for the case just described of absolutely positioned elements filling the available space:
If both top and bottom are specified (technically, not auto), top wins.
If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.).
翻译：
绝对定位元素的定位值发生冲突时的解决方法:
- 如果同时指定 top 和 bottom（非 auto），优先采用 top。
- 如果同时指定 left 和 right，若 direction 为 ltr（英语、汉语等），则优先采用 left；若 direction 为 rtl（阿拉伯语、希伯来语等），则优先采用 right。
相对定位元素也是同理。