/*下面是任务部分*/
#box3{ width:200px; height:200px; position:absolute; }
#box4{ width:99%; position:absolute; bottom:0px; }
这里为何参照定位的元素必须加入position:relative; 明明用position:absolute; 不是也可以么 ？？、
都定义成absolute，页面长了，一个个计算div之间的距离？
和你有同样的疑问，看到大家的解答明白了：除了body，被参照的元素必须有定位属性才起作用，属性具体是什么不重要，写position:relative/absolute/fixed都行。
就拿这节例子来说，box3你可以写position:relative/absolute/fixed里任何一个，但是你不写的话，box4就会相对body进行绝对定位而不是box3，原因是绝对定位属性需要相对于其最接近的一个具有定位属性的父包含块进行，这是12-6原话
小节Relative与Absolute组合使用第2条有讲到："参照定位的元素必须加入position:relative;" 这是使用规则，遵照执行就好了不需要太多疑问，不求甚解。 可以理解为被参照的前辈元素没有定位属性，只有加了这样的指令之后前辈元素才可以在浏览器中自身定位。
绝对定位的参照物是最近的一个已经定位的父辈或祖辈元素（如果没有则是HTML），所以使用你说的那种方法也可以。