今天小編給大家分享一下css中如何使用相對(duì)定位的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
成都創(chuàng)新互聯(lián)公司主營(yíng)平定網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,App定制開發(fā),平定h5重慶小程序開發(fā)搭建,平定網(wǎng)站營(yíng)銷推廣歡迎平定等地區(qū)企業(yè)咨詢
一.基本概念:
顧名思義,此種定位是相對(duì)某一個(gè)對(duì)象進(jìn)行的偏移,相對(duì)定位并不能使對(duì)象脫離文檔流,盡管它的位置可能產(chǎn)生偏移,但是對(duì)象初始位置仍然會(huì)被保留。
如果要真正掌握此種定位方式,搞清楚需相對(duì)于哪個(gè)對(duì)象進(jìn)行偏移是關(guān)鍵點(diǎn)。
二.如何將一個(gè)元素設(shè)置為相對(duì)定位:
當(dāng)一個(gè)對(duì)象的position屬性值被設(shè)置為relative的時(shí)候就會(huì)發(fā)生相對(duì)定位:
代碼如下:
position:relative
三.定位參考對(duì)象:
可以使用top屬性和left屬性設(shè)置相對(duì)定位對(duì)象的偏移量。
相對(duì)定位的偏移參考對(duì)象是此對(duì)象本身。
代碼實(shí)例:
首先看一個(gè)沒有使用定位的代碼實(shí)例:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>CSS相對(duì)定位-螞蟻部落</title>
<style type="text/css">
.father{
width:400px;
height:400px;
background-color:green;
margin:50px;
}
.first{
width:100px;
height:100px;
background-color:red
}
.second{
width:100px;
height:100px;
background-color:blue
}
</style>
</head>
<body>
<div class="father">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
</html>
在以上代碼中,所有的對(duì)象都沒有采用相對(duì)定位,這里無須多介紹了。
再來看一段采用相對(duì)定位的代碼:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>CSS相對(duì)定位</title>
<style type="text/css">
.father{
width:400px;
height:400px;
background-color:green;
margin:50px;
}
.first{
width:100px;
height:100px;
background-color:red;
position:relative;
left:20px;
top:30px;
}
.second{
width:100px;
height:100px;
background-color:blue
}
</style>
</head>
<body>
<div class="father">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
</html>
以上就是“css中如何使用相對(duì)定位”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章標(biāo)題:css中如何使用相對(duì)定位
文章出自:http://m.newbst.com/article4/joccoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、云服務(wù)器、服務(wù)器托管、自適應(yīng)網(wǎng)站、網(wǎng)站導(dǎo)航、微信公眾號(hào)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)