我理解的css3中：position中的relative和absolute
時間：2019-09-19 訪問量：0
在網(wǎng)站開發(fā)過程中，我們常常要用到相對定位和**定位。
而作為一個前端開發(fā)小白來說。對于這兩個的理解往往是很不容易的。以下是我在使用中的感覺。
手先我們來看一段初始代碼
<style>
.box1{width:600px; height:400px; background:#000; }
.box2{width:200px; height:150px; background: red; }
</style>
<div class="box1">
<div class="box2"></div>
</div>
我們可以得到如圖所示的效果。這個時候我們也可以通過調(diào)整margin或者padding來調(diào)用紅色區(qū)域在黑色區(qū)域的不同位置。
但是在網(wǎng)站建設(shè)過程中，我們開發(fā)前端的人員往往覺得這樣是不夠的。因為我們在box1當中，可能需要添加文字或者圖片。比如說：
<div class="box1"> <img src="1.jpg" width="600px" height="400px;"> <div class="box2"></div> </div>
這個時候我們發(fā)現(xiàn)，紅色區(qū)域已經(jīng)脫離了BOX1了
如何調(diào)整BOX2的位置呢？這個時候就需要用到：position了。
.box1{width:600px; height:400px; background:#000; position:relative; }
.box2{width:200px; height:150px; background: red; position: absolute; top: 10px; LEFT:10PX;}我們將外部的大BOX1設(shè)置一個**定位，再將內(nèi)部的小BOX2設(shè)置為相對定位，并添加相對定位的位置，如TOP，LEFT，就可以了。
