position属性问题

HTML code

        <div class="right">            <div class="shadow"></div>          </div>

CSS code

.right{    width:30%;    float:right;    position:relative;    }.shadow{    width: 100px;    height: 100px;    background-color: rgb(237, 237, 237);    position: absolute;    left: 0px;    top: 2px;    }

重点是，为什么right的position属性为relative时，shadow是在right内的，当right的position属性为默认static时，shadow就到页面左上角去了？

[解决办法]
绝对定位的元素的位置是相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块(也就是body)。
[解决办法]
relative生成相对定位的元素，相对于其正常位置进行定位。这时候shadow会相对于right进行left 0像素的偏移,top 2像素的偏移。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。