HTML實(shí)現(xiàn)定位position的方法?這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),仁壽企業(yè)網(wǎng)站建設(shè),仁壽品牌網(wǎng)站建設(shè),網(wǎng)站定制,仁壽網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,仁壽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
一、CSS定位(Posotioning)屬性允許你對(duì)元素進(jìn)行定位, position屬性值:
static(默認(rèn)值):元素框正常生成。塊狀元素生成一個(gè)人矩形框,作為文檔流/標(biāo)準(zhǔn)流的一部分,行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或者多個(gè)行框,置于其父元素中
relative:元素框偏離某個(gè)位置,元素仍保持其未定位前的形狀,它原來所占空間仍保留,從這個(gè)角度看,好像改元素仍然在文檔流/標(biāo)準(zhǔn)流中一樣
absolute:元素從文檔流中完全刪除,并相對(duì)于其包含快定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先正常文檔流中所占的空間會(huì)關(guān)閉,就像元素不存在一樣,元素定位后成一個(gè)塊級(jí)框,而不論原來它是在正常流中是何種類型的框
fixed:元素的表現(xiàn)和absolute類似,不同的是包含塊是視窗本身(body)
二、relative介紹
使用了該屬性值的元素會(huì)相對(duì)于原來的位置的左上角的坐標(biāo)使用top和left來進(jìn)行定位
代碼:
<style type="text/css">
#main{
width:800px;
height:400px;
margin:0 auto;
border:1px solid blue;
}
.p{
width:110px;
height:100px;
background:yellow;
margin-left:10px;
float:left;
}
</style>
</head>
<body>
<p id="main">
<p class="p">p1</p>
<p class="p">p2</p>
<p class="p">p3</p>
<p class="p">p4</p>
</p>
</body>效果圖:

(1)修改p2的定位值為relative 即:添加position:relative;top:120px;left:50px;

相對(duì)于紅點(diǎn)位置向右向下分別移動(dòng)了50像素和120像素,原來位置依然空出來,left和top值也可以是負(fù)值,不同的是向相反的方向移動(dòng)了
改變p2的定位為absolute 即:添加position:absolute;top:120px;left:50px;

可以看出p2是相對(duì)于body的左上角移動(dòng),并且原來的位置被占了,好像從來沒有它的位置一樣,這是因?yàn)閜2會(huì)向自己的下面的框找不在標(biāo)準(zhǔn)流中的那一層,一直往下尋找,知道找到位置,如果找不到會(huì)以body為準(zhǔn),然后就會(huì)向這一層的左上角位置相對(duì)移動(dòng),下面我們可以為綠色的框框添加定位relative感受一下

會(huì)相對(duì)于綠色的框框的左上角移動(dòng)
fixed:給p2添加定位fixed屬性值

不管是給p2的父元素添加定位relative還是absolute,p2總戶籍相對(duì)于body的左上角移動(dòng),并且之前的位置已經(jīng)被占用了。
定位還是比較簡(jiǎn)單了相對(duì)于浮動(dòng)來說,祝各位能夠有所收獲
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)HTML實(shí)現(xiàn)定位position的方法大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前文章:HTML實(shí)現(xiàn)定位position的方法
本文鏈接:http://chinadenli.net/article14/goipde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、靜態(tài)網(wǎng)站、外貿(mào)建站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站制作、網(wǎng)站營(yíng)銷
聲明:本網(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)