HTML如何實(shí)現(xiàn)定位position

來(lái)源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 15:25:41

HTML如何實(shí)現(xiàn)定位position

一、CSS定位（Posotioning）屬性允許你對(duì)元素進(jìn)行定位，position屬性值。static（默認(rèn)值）：元素框正常生成。塊狀元素生成一個(gè)人矩形框，作為文檔流/標(biāo)準(zhǔn)流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或者多個(gè)行框，置于其父元素中。relative：元素框偏離某個(gè)位置，元素仍保持其未定位前的形狀，它原來(lái)所占空間仍保留，從這個(gè)角度看，好像改元素仍然在文檔流/標(biāo)準(zhǔn)流中一樣。absolute：元素從文檔流中完全刪除，并相對(duì)于其包含快定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先正常文檔流中所占的空間會(huì)關(guān)閉，就像元素不存在一樣，元素定位后成一個(gè)塊級(jí)框，而不論原來(lái)它是在正常流中是何種類(lèi)型的框。二、relative介紹。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀一、CSS定位（Posotioning）屬性允許你對(duì)元素進(jìn)行定位，position屬性值。static（默認(rèn)值）：元素框正常生成。塊狀元素生成一個(gè)人矩形框，作為文檔流/標(biāo)準(zhǔn)流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或者多個(gè)行框，置于其父元素中。relative：元素框偏離某個(gè)位置，元素仍保持其未定位前的形狀，它原來(lái)所占空間仍保留，從這個(gè)角度看，好像改元素仍然在文檔流/標(biāo)準(zhǔn)流中一樣。absolute：元素從文檔流中完全刪除，并相對(duì)于其包含快定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先正常文檔流中所占的空間會(huì)關(guān)閉，就像元素不存在一樣，元素定位后成一個(gè)塊級(jí)框，而不論原來(lái)它是在正常流中是何種類(lèi)型的框。二、relative介紹。

本文主要為大家分享一篇HTML如何實(shí)現(xiàn)定位position的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧。

一、CSS定位（Posotioning）屬性允許你對(duì)元素進(jìn)行定位， position屬性值：

static（默認(rèn)值）：元素框正常生成。塊狀元素生成一個(gè)人矩形框，作為文檔流/標(biāo)準(zhǔn)流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或者多個(gè)行框，置于其父元素中

relative：元素框偏離某個(gè)位置，元素仍保持其未定位前的形狀，它原來(lái)所占空間仍保留，從這個(gè)角度看，好像改元素仍然在文檔流/標(biāo)準(zhǔn)流中一樣

absolute：元素從文檔流中完全刪除，并相對(duì)于其包含快定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先正常文檔流中所占的空間會(huì)關(guān)閉，就像元素不存在一樣，元素定位后成一個(gè)塊級(jí)框，而不論原來(lái)它是在正常流中是何種類(lèi)型的框

fixed：元素的表現(xiàn)和absolute類(lèi)似，不同的是包含塊是視窗本身（body）

二、relative介紹

使用了該屬性值的元素會(huì)相對(duì)于原來(lái)的位置的左上角的坐標(biāo)使用top和left來(lái)進(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像素，原來(lái)位置依然空出來(lái)，left和top值也可以是負(fù)值，不同的是向相反的方向移動(dòng)了

改變p2的定位為absolute 即：添加position:absolute;top:120px;left:50px;

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