如何解析DIV絕對定位和相對定位

這篇文章給大家介紹如何解析DIV絕對定位和相對定位，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

你對DIV中絕對定位和相對定位的概念是否了解，這里和大家分享一下，絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設置。相對定位指你所定位的要素的位置相對于在文件中所分配的位置。

DIV簡介

DIV在編程中又叫做整除，即只得商的整數。DIV元素是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

使用DIV標簽

當我們使用CSS-P的時候，我們主要把它用在DIV（division）tag上。當你把文字，圖像，或其他的放在DIV中，它可稱作為“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。而中文我們把它稱作“層次”。所以當你以后看到這些名詞的時候，你就知道它們是指一段在DIV中的HTML。
使用DIV的方法跟使用其他tag的方法一樣：ThisisaDIVtag.

如果單獨使用DIV而不加任何CSS-P,那么它在網頁中的效果和使用是一樣的。
但當我們把CSS-P用到DIV中去以后，我們就可以嚴格設定它的位置。首先我們需要給這個可以被CSS-P控制的DIV一個ID或說是它的名字。比如說我們給下面這個DIV的名字是truck。給名字的目的是我們以后可用JavaScript來控制它，比如說移動它或改變它的一些性質等等。

DIV絕對定位和相對定位

◆DIV絕對定位：

定位屬性將是網蟲們打開幸福之門的鑰匙：H4{position:absolute;left:100px;top:43px}
這項CSS規則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這里***設置了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽窗口。

左邊和頂部屬性很直觀，左邊（left）設定要素距瀏覽器窗口左邊的距離，頂部（top）設定距離瀏覽器窗口頂部的距離。設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對于母體要素的尺寸。
你可以定位什么呢？任何東西！段落、單詞、GIF和JPEG圖像、QUICKTIME電影等等。

◆DIV相對定位：

絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設置。相對定位指你所定位的要素的位置相對于在文件中所分配的位置。例：
I{position:relative;left:40px;top:10px}

相對定位的關鍵在于定位了的要素的位置是相對于它通常應在的位置進行定位。相對定位單元出現在普通的靜態定位單元的行間，定位時沒有把自己和靜態定位單元完全分開。如果你停止使用相對定位，則文字的顯示位置將恢復正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。

除了相對定位和絕對定位，你還可以使用static（靜止）參數值。Static是position特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設置。也就是說，除了邊距特性，或通過使用float特性來浮動單元可影響單元的定位外，其它均不可以。

關于如何解析DIV絕對定位和相對定位就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。