在使用position的時候往往不是單獨,而是配合使用,比如最常用的就是position:relative與position:absolute的組合使用,不同于position: fixed;單獨就可以相對瀏覽器窗口進行定位!
下面是復制來自于慕課網的position:relative與position:absolute組合使用教程:
使用position:absolute
可以實現被設置元素相對于瀏覽器(body)設置定位以后,大家有沒有想過可不可以相對于其它元素進行定位呢?答案是肯定的,當然可以。使用position:relative來幫忙,但是必須遵守下面規范:
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定位了(這里注意參照物就可以不是瀏覽器了,而可以自由設置了)。
案例:
/*下面是任務部分*/ #box3{ width:200px; height:200px; position:relative; } #box4{ width:99%; position:absolute; bottom:0; }
<div id="box3"> <img src=#> <div id="box4">當我還是三年級的學生時是一個害羞的小女生。</div> </div>