当前位置: 代码迷 >> HTML/CSS >> position属性有关问题
  详细解决方案

position属性有关问题

热度:137   发布时间:2012-08-01 17:53:40.0
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 声明)。
  相关解决方案