1. 程式人生 > >css中子元素相對於父元素定位

css中子元素相對於父元素定位

1、參照定位的元素必須是相對定位元素的前輩元素:

<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>

從上面程式碼可以看出box1是box2的父元素(父元素當然也是前輩元素了)。

2、參照定位的元素必須加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

這樣box2就可以相對於父元素box1定位了(這裡注意參照物就可以不是瀏覽器了,而可以自由設定了)。

top left right bottom 指的是距離這4個邊多少距離