不太懂啊，为什么相对参照元素定位在框里面 而下面的当我还是.....女生 却在图片的外面啊 如果是图片原因的话为什么把图片加到 id=box1 里面还是和下面的图不一样 还有#box4的 width:99%; 有什么用 我去掉了 width:99%; 也感觉没什么啊
width:99%是box4框的大小，你改为50%或其它的，你就知道了，左下角定位。都在框里呀，绝对(absolute)定位对象,相对(relative)定位对象。http://www.cnblogs.com/mutuan/archive/2011/11/08/2240822.html
当设定position: relative 则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位,
当设定position:absolute
如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。
我复制了你的代码，发现你现在的box4的文字已经在box3图片的底部了，这里没有问题啊？你关于box3和box4的代码没有什么问题，不过建议还是在“bottom:0;”的0后面加上px 单位。
你去掉width:99%之后还是有区别的，你检查一下右边框，不加99%的时候，box4的右边框左移了！
我是在chrome下测试的，其他浏览器下不清楚具体效果。
你试着删掉一些东西 如： position:absolute; id="box3"，慢慢试吧，大概就明白了，相对位置与绝对位置
现在不懂不要紧，代码没有最优，只有更优，等你把该学的都学完了，像这样的问题都不是是事了，先不要钻牛角尖，继续吧，我相信总有一天你自己会能明白的。