本篇文章為大家展示了css中怎么使用position absolute屬性設(shè)置相對于父元素,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。

有時候我們需要在父元素的容器內(nèi)設(shè)置相對的絕對位置
要做到這一點(diǎn)需要把父元素的position屬性設(shè)置為relative,設(shè)置為relative之后不設(shè)置left和top屬性,這時候父元素雖然是relative的,但是還是在原來位置。 然后把子元素的位置position設(shè)置為absolute的,并設(shè)置其left,top,right,bottom屬性,這樣就是相對于父元素的絕對位置了。
如下html示例代碼:
<!doctype html>
<html>
<style type="text/css">
#father {
position: relative;
width:600px;
margin:auto;
height:400px;
border:1px solid red;
}
#son1 {
position: absolute;
top: 0;
background:#f0f0f0;
}
#son2 {
position: absolute;
bottom: 0;
background:blue;
}
</style>
<body>
<div id="father">
<div id="son1">I am son1</div>
<div id="son2">I am son2</div>
</div>
</body>
</html>上述內(nèi)容就是css中怎么使用position absolute屬性設(shè)置相對于父元素,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章名稱:css中怎么使用positionabsolute屬性設(shè)置相對于父元素-創(chuàng)新互聯(lián)
URL鏈接:http://chinadenli.net/article30/cedhso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站營銷、電子商務(wù)、網(wǎng)站維護(hù)、虛擬主機(jī)、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容