方案代码及效果原理html的浏览器渲染，有文档流的说法，块级元素包裹渲染，内联（inline）元素渲染内联，这里，两个div都是块级元素，一父一子。通常情况下，渲染结果是父元素在浏览器的左上角，子元素在父元素的左上角。如果我们想相对于父元素定位子元素，我们需要使用position属性。属性值说明absolute生成一个绝对定位的元素，相对于静态定位以外的第一个父元素定位。relative生成??相对定位的元素，相对于其正常位置定位。我们知道要使用相对于父元素的定位，就必须使用absolute。为什么直接用absolute不行呢？因为使用absolute相对于父元素定位，对父元素有一个要求，即父元素的位置不能是静态的。如果父元素的位置是静态的，则继续查找元素，直到找不到位置不是静态的元素为止。这个元素是相对定位的，所以需要设置父元素的position为relative。这没有任何作用，因为relative只是相对于正常位置定位，也就是所谓文档流的默认输出位置。如果我们设置position为relative而不设置偏移量x,y表示父元素的位置没有改变。
