色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

position:relative與position:absolute組合使用

老白8年前2002瀏覽0評論

在使用position的時候往往不是單獨(dú),而是配合使用,比如最常用的就是position:relative與position:absolute的組合使用,不同于position: fixed;單獨(dú)就可以相對瀏覽器窗口進(jìn)行定位!

下面是復(fù)制來自于慕課網(wǎng)的position:relative與position:absolute組合使用教程:

使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對于瀏覽器(body)設(shè)置定位以后,大家有沒有想過可不可以相對于其它元素進(jìn)行定位呢?答案是肯定的,當(dāng)然可以。使用position:relative來幫忙,但是必須遵守下面規(guī)范:

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

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

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

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

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

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

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

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


案例:

positionrelative與positionabsolute組合使用.png

/*下面是任務(wù)部分*/
#box3{
    width:200px;
    height:200px;
    position:relative;
}
#box4{
  width:99%;
  position:absolute;
 bottom:0;
}
<div id="box3">
    <img src=#>
    <div id="box4">當(dāng)我還是三年級的學(xué)生時是一個害羞的小女生。</div>
</div>