div中的相對定位與絕對定位
阿新 • • 發佈：2018-12-30
這一段時間打算完全用CSS的DIV編寫一個頁面，做了兩天思緒就有點亂了。
有的時候把某一個問題單獨抽出來看感覺很簡單。而複合起來就難的多,各種各樣的問題就來了。
程式中最討厭的就是找BUG了。思路前後銜接不上，捋不清頭緒，看的頭都大了。
家裡有兩個高手，不過卻很少問。就像我的東西一定要從頭到尾由我經手來做，那才是我的東西。呵呵～
****************************************
學習筆記：呵呵～～這次的筆記比較多
定位標籤：position
包含的屬性：relative（相對）與 absolute（絕對）
1.position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素“相對於”它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框）
例如：＃mybox{
position:relative;
left:20px;
top:20px;
}
效果就是使這個層向下和向左移動了20px。
2.position:absolute; 表示絕對定位，位置將依據瀏覽器左上角的0點開始計算，
絕對定位使元素與文件流無關，因此不佔據空間。普通文件流中其這元素的佈局就像絕對定位的元素不存在時一樣。它相對於最近的已定位的祖先元素。如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。根據使用者代理的不同，最初的包含塊可能是畫布事HTML元素。（因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制這些框的堆放次序。z-index的值越高，框在堆中的位置就越高。）
那麼有個問題產生了，現在大家做的網頁大部分是居中的，那麼我需要這個元素跟著網頁
中的某個元素位置不論解析度是多少他的位置始終是針對頁內的某個元素的，那麼單純的
absolute是不行的。
正確的解決方法就是在元素的父級元素定義為position:relative;（更正：這裡可以是祖父
級，也可以是position:absolute;）需要絕對定位的元素設為position:absolute;
這樣再設定top,right,bottom,left的值就可以了，這樣其定位的參照標準就是父級的左上角padding的左上側！
********************************************************************************
在網上載了一段文章收藏：
CSS單元的位置和層次-div標籤 我們都知道，在網頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標籤和隱式GIF圖象，即使這樣也不能保證定位的精確，因為瀏覽器和操作平臺的不同會使顯示的結果發生變化。
而CSS能使你看到希望的曙光。利用今天我們即將學到的CSS屬性，你可以精確地設定要素的位置，還能將定位的要素疊放在彼此之上，還有...還有......你自己慢慢看吧！
Cascading Style Sheets（CSS）是 DHTML 的基礎。CSS 用來設定你網頁上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一個擴充套件，它可用來控制任何東西在網頁上或是說在視窗中的位置。請你記住這兩個名詞：CSS 和 CSS－P。下面四個英文網址提供了詳細的關於 CSS 和 CSS-P 的檔案和解釋。
● 1．使用 DIV 標籤 （div）
當我們使用 CSS-P 的時候， 我們主要把它用在 DIV（division）tag 上。當你把文字，圖象，或其他的放在 DIV 中，它可稱作為“DIV block”，或“DIV element”或“CSS-layer”，或乾脆叫“layer”。而中文我們把它稱作“層次”。所以當你以後看到這些名詞的時候，你就知道它們是指一段在 DIV 中的 HTML。
使用 DIV 的方法跟使用其他 tag 的方法一樣：
<DIV>This is a DIV tag .</DIV>
如果單獨使用 DIV 而不加任何 CSS-P, 那麼它在網頁中的效果和使用 <P></P> 是一樣的。
但當我們把 CSS-P 用到 DIV 中去以後，我麼就可以嚴格設定它的位置。首先我們需要給這個可以被 CSS-P 控制的 DIV 一個 ID 或說是它的名字。比如說我們給下面這個 DIV 的名字是 truck。給名字的目的是我們以後可用 javascript 來控制它，比如說移動它或改變它的一些性質等等。
<DIV ID="truck">
This is a truck
</DIV>
給層次取什麼名字是隨意的，名字可以是任何英文字母和數字，但第一個必須是字母。有兩種把 CSS-P 應用到 DIV 的方法。
Inline CSS：Inline 是最常用的方法。
<DIV ID="truck" STYLE="styles go here">
This is a truck .
</DIV>
External STYLE tag：使用 External 方法的結果是一樣的。我們會在以後的課程裡再詳細解釋這種方法。現在我們主要討論Inline 方法。請注意在 External 方法裡，在 STYLE 裡的 ID 和 DIV 裡的關係。
<STYLE TYPE="text/css">
<!-- #truck {styles go here} -->
</STYLE>
<DIV ID="truck">This is a truck .</DIV>
Cross-Browser CSS 性質：
我們這個課程的主要目的是讓你寫出的網頁在 NS4 和 IE4 上都能工作， 所以我們主要討論那些對倆者都通用的性質。下面這些性質符合由 W3C 給出的標準。
position 決定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相對於其他 tag 的，而“absolute”是說 DIV tag 的位置是相對於它所在的視窗。
left 相對於視窗左邊的位置
top 相對於視窗上邊的位置
width DIV tag 的寬度。所有在 DIV 裡的文字或html都在裡面。
height DIV tag 的高度。這個性質很少用除非你想 Clip 層次。
clip 給出 layer 的 clipping（可看的見的）部分。Clip 可使得 DIV 顯示為一個可以定義的很準確的方塊。你可以用以下的四個值來給出這個方塊的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility 隱蔽或展現DIV 根據它的值“visible”，“hidden”，“inherit”。
z-index DIV tag 的立體位置。值越大 DIV 的位置越高。
background-color DIV 背景的顏色。
layer-background-color Netscape 的 DIV 背景顏色。
background-image DIV 的背景圖象。
layer-background-image Netscape 的 DIV 的背景圖象。
● 2．絕對定位和相對定位 （position）
絕對定位：
定位屬性將是網蟲們開啟幸福之門的鑰匙：
H4 { position: absolute; left: 100px; top: 43px }
這項CSS規則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這裡唯一設定了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽視窗。
左邊和頂部屬性很直觀，左邊（left）設定要素距瀏覽器視窗左邊的距離，頂部（top）設定距離瀏覽器視窗頂部的距離。設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對於母體要素的尺寸。
你可以定位什麼呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。
相對定位：
絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設定。相對定位指你所定位的要素的位置相對於在檔案中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
相對定位的關鍵在於定位了的要素的位置是相對於它通常應在的位置進行定位。相對定位單元出現在普通的靜態定位單元的行間，定位時沒有把自己和靜態定位單元完全分開。如果你停止使用相對定位，則文字的顯示位置將恢復正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。
除了相對定位和絕對定位，你還可以使用static（靜止）引數值。Static 是 position 特性的預設值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設定。也就是說，除了邊距特性，或通過使用 float 特性來浮動單元可影響單元的定位外，其它均不可以。
● 3．定位單元的控制 （width、height、visiblility）
除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁面的可視性。
寬度：定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字元向右流動的限制，即設定要素的寬度。
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
瀏覽器接到這項規則時，它將文字按照規則規定的效果顯示，還將段落的最大水平尺寸限制在150象素。
寬度屬性只適用於絕對定位的要素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對於母體要素的比例。IE 4中，這項屬性還可用於圖象。你可以通過寬度設定人為地拉寬或壓縮圖象。
高度：理論上講，高度應該和寬度的設定類似，只不過是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
這裡我用了“理論上講”，因為有些瀏覽器不支援高度屬性。
可視性：利用CSS，你可以隱藏要素，使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。
H4 { visibility: hidden }
選項：
visible 使要素可以被看見
hidden 使要素被隱藏
inherit 指它將繼承母體要素的可視性設定。
值 inherit 為預設值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如，段內的 EM 單元被指定為可見，這時如果該段被隱藏，則段內的所有其它內容都將消失，而唯有 EM 單元中的文字是可見的。
當一個要素被隱藏後，它仍然要佔據瀏覽器視窗中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那麼，其顯示效果將是文字包圍著一塊空白區域。
這條屬性在編寫語言和使用動態HTML時很有用，比如你可以使某段落或圖象只在滑鼠滑過時才顯示。
● 4．單元層次 （z-index）
特性 z-index 用於堆疊螢幕上的單元。預設情況下，單元堆疊的順序為它們出現在HTML標記的順序——也就是說，後出現單元堆疊在早出現單元的上面。Z-index 特性實際上定義同屬（sibling）單元的堆疊順序以及單元相對父單元的堆疊。按照規範草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來決定（值大的單元在上層）。同樣，具有負 z-index 值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來定（值大的單元在上層，例如值為 -1 的單元在值為 -2 的單元的上面）。
該引數值使用純整數。z-index用於絕對定位或相對定位了的要素。你也可以給圖象設定z-index。（對於Communicator，最好將 <IMG>標籤包在<SPAN>或 <DIV>標籤內，然後將z-index應用到<SPAN>或 <DIV>。）
● 5．剪輯絕對定位單元 （clip）
絕對定位單元可以被剪輯——也即剪輯顯示給使用者的區域，只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文字和影象的網路頁面，這並不是一個很有用的特徵。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支援多媒體頁面，它們通過文件的指令碼介面動態地調整單元周圍的剪輯區，從而實線文字“劃入”和影象漸顯等顯示特徵。
在CSS中，剪輯通過 clip 特性來控制，這一特性只能用於絕對定位單元，其預設值為 auto，按單元的外邊緣來剪輯單元（實際上等於沒有剪輯）。另外，可通過如下表達式設定剪輯框：
clip : rect(top,right.bottom,left) ;
其中 top、right、bottom 和 left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對於被剪輯單元左上角的位置。Top、right、bottom 和 left 的值可以為任意絕對或相對長度值（但不能為百分比值），或者是關鍵字 auto。取值為 auto 意味著剪輯區域的各邊放好以後，被剪輯單元中的任何內容都不會超出這個區域。
● 6．控制單元溢位 （overflow）
固定絕對或相對定位單元的 width 和 height，很可能會因為指定的區域不能滿足單元實際內容的需要，而造成單元內容溢位。這時可使用 overflow 來指定瀏覽器如何處理溢位：值 none（預設值）允許瀏覽器顯示溢位的內容，因此單元可溢位指定的區域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內容，這樣，超出指定區域的單元內容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內容（同 clip），不過，瀏覽器應該（如果可能的話）為單元提供滾動條以使使用者能通過滾動來瀏覽被剪輯的內容。
有的時候把某一個問題單獨抽出來看感覺很簡單。而複合起來就難的多,各種各樣的問題就來了。
程式中最討厭的就是找BUG了。思路前後銜接不上，捋不清頭緒，看的頭都大了。
家裡有兩個高手，不過卻很少問。就像我的東西一定要從頭到尾由我經手來做，那才是我的東西。呵呵～
****************************************
學習筆記：呵呵～～這次的筆記比較多
定位標籤：position
包含的屬性：relative（相對）與 absolute（絕對）
1.position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素“相對於”它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框）
例如：＃mybox{
position:relative;
left:20px;
top:20px;
}
效果就是使這個層向下和向左移動了20px。
2.position:absolute; 表示絕對定位，位置將依據瀏覽器左上角的0點開始計算，
絕對定位使元素與文件流無關，因此不佔據空間。普通文件流中其這元素的佈局就像絕對定位的元素不存在時一樣。它相對於最近的已定位的祖先元素。如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。根據使用者代理的不同，最初的包含塊可能是畫布事HTML元素。（因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制這些框的堆放次序。z-index的值越高，框在堆中的位置就越高。）
那麼有個問題產生了，現在大家做的網頁大部分是居中的，那麼我需要這個元素跟著網頁
中的某個元素位置不論解析度是多少他的位置始終是針對頁內的某個元素的，那麼單純的
absolute是不行的。
正確的解決方法就是在元素的父級元素定義為position:relative;（更正：這裡可以是祖父
級，也可以是position:absolute;）需要絕對定位的元素設為position:absolute;
這樣再設定top,right,bottom,left的值就可以了，這樣其定位的參照標準就是父級的左上角padding的左上側！
********************************************************************************
在網上載了一段文章收藏：
CSS單元的位置和層次-div標籤 我們都知道，在網頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標籤和隱式GIF圖象，即使這樣也不能保證定位的精確，因為瀏覽器和操作平臺的不同會使顯示的結果發生變化。
而CSS能使你看到希望的曙光。利用今天我們即將學到的CSS屬性，你可以精確地設定要素的位置，還能將定位的要素疊放在彼此之上，還有...還有......你自己慢慢看吧！
Cascading Style Sheets（CSS）是 DHTML 的基礎。CSS 用來設定你網頁上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一個擴充套件，它可用來控制任何東西在網頁上或是說在視窗中的位置。請你記住這兩個名詞：CSS 和 CSS－P。下面四個英文網址提供了詳細的關於 CSS 和 CSS-P 的檔案和解釋。
● 1．使用 DIV 標籤 （div）
當我們使用 CSS-P 的時候， 我們主要把它用在 DIV（division）tag 上。當你把文字，圖象，或其他的放在 DIV 中，它可稱作為“DIV block”，或“DIV element”或“CSS-layer”，或乾脆叫“layer”。而中文我們把它稱作“層次”。所以當你以後看到這些名詞的時候，你就知道它們是指一段在 DIV 中的 HTML。
使用 DIV 的方法跟使用其他 tag 的方法一樣：
<DIV>This is a DIV tag .</DIV>
如果單獨使用 DIV 而不加任何 CSS-P, 那麼它在網頁中的效果和使用 <P></P> 是一樣的。
但當我們把 CSS-P 用到 DIV 中去以後，我麼就可以嚴格設定它的位置。首先我們需要給這個可以被 CSS-P 控制的 DIV 一個 ID 或說是它的名字。比如說我們給下面這個 DIV 的名字是 truck。給名字的目的是我們以後可用 javascript 來控制它，比如說移動它或改變它的一些性質等等。
<DIV ID="truck">
This is a truck
</DIV>
給層次取什麼名字是隨意的，名字可以是任何英文字母和數字，但第一個必須是字母。有兩種把 CSS-P 應用到 DIV 的方法。
Inline CSS：Inline 是最常用的方法。
<DIV ID="truck" STYLE="styles go here">
This is a truck .
</DIV>
External STYLE tag：使用 External 方法的結果是一樣的。我們會在以後的課程裡再詳細解釋這種方法。現在我們主要討論Inline 方法。請注意在 External 方法裡，在 STYLE 裡的 ID 和 DIV 裡的關係。
<STYLE TYPE="text/css">
<!-- #truck {styles go here} -->
</STYLE>
<DIV ID="truck">This is a truck .</DIV>
Cross-Browser CSS 性質：
我們這個課程的主要目的是讓你寫出的網頁在 NS4 和 IE4 上都能工作， 所以我們主要討論那些對倆者都通用的性質。下面這些性質符合由 W3C 給出的標準。
position 決定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相對於其他 tag 的，而“absolute”是說 DIV tag 的位置是相對於它所在的視窗。
left 相對於視窗左邊的位置
top 相對於視窗上邊的位置
width DIV tag 的寬度。所有在 DIV 裡的文字或html都在裡面。
height DIV tag 的高度。這個性質很少用除非你想 Clip 層次。
clip 給出 layer 的 clipping（可看的見的）部分。Clip 可使得 DIV 顯示為一個可以定義的很準確的方塊。你可以用以下的四個值來給出這個方塊的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility 隱蔽或展現DIV 根據它的值“visible”，“hidden”，“inherit”。
z-index DIV tag 的立體位置。值越大 DIV 的位置越高。
background-color DIV 背景的顏色。
layer-background-color Netscape 的 DIV 背景顏色。
background-image DIV 的背景圖象。
layer-background-image Netscape 的 DIV 的背景圖象。
● 2．絕對定位和相對定位 （position）
絕對定位：
定位屬性將是網蟲們開啟幸福之門的鑰匙：
H4 { position: absolute; left: 100px; top: 43px }
這項CSS規則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這裡唯一設定了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽視窗。
左邊和頂部屬性很直觀，左邊（left）設定要素距瀏覽器視窗左邊的距離，頂部（top）設定距離瀏覽器視窗頂部的距離。設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對於母體要素的尺寸。
你可以定位什麼呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。
相對定位：
絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設定。相對定位指你所定位的要素的位置相對於在檔案中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
相對定位的關鍵在於定位了的要素的位置是相對於它通常應在的位置進行定位。相對定位單元出現在普通的靜態定位單元的行間，定位時沒有把自己和靜態定位單元完全分開。如果你停止使用相對定位，則文字的顯示位置將恢復正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。
除了相對定位和絕對定位，你還可以使用static（靜止）引數值。Static 是 position 特性的預設值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設定。也就是說，除了邊距特性，或通過使用 float 特性來浮動單元可影響單元的定位外，其它均不可以。
● 3．定位單元的控制 （width、height、visiblility）
除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁面的可視性。
寬度：定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字元向右流動的限制，即設定要素的寬度。
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
瀏覽器接到這項規則時，它將文字按照規則規定的效果顯示，還將段落的最大水平尺寸限制在150象素。
寬度屬性只適用於絕對定位的要素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對於母體要素的比例。IE 4中，這項屬性還可用於圖象。你可以通過寬度設定人為地拉寬或壓縮圖象。
高度：理論上講，高度應該和寬度的設定類似，只不過是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
這裡我用了“理論上講”，因為有些瀏覽器不支援高度屬性。
可視性：利用CSS，你可以隱藏要素，使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。
H4 { visibility: hidden }
選項：
visible 使要素可以被看見
hidden 使要素被隱藏
inherit 指它將繼承母體要素的可視性設定。
值 inherit 為預設值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如，段內的 EM 單元被指定為可見，這時如果該段被隱藏，則段內的所有其它內容都將消失，而唯有 EM 單元中的文字是可見的。
當一個要素被隱藏後，它仍然要佔據瀏覽器視窗中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那麼，其顯示效果將是文字包圍著一塊空白區域。
這條屬性在編寫語言和使用動態HTML時很有用，比如你可以使某段落或圖象只在滑鼠滑過時才顯示。
● 4．單元層次 （z-index）
特性 z-index 用於堆疊螢幕上的單元。預設情況下，單元堆疊的順序為它們出現在HTML標記的順序——也就是說，後出現單元堆疊在早出現單元的上面。Z-index 特性實際上定義同屬（sibling）單元的堆疊順序以及單元相對父單元的堆疊。按照規範草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來決定（值大的單元在上層）。同樣，具有負 z-index 值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來定（值大的單元在上層，例如值為 -1 的單元在值為 -2 的單元的上面）。
該引數值使用純整數。z-index用於絕對定位或相對定位了的要素。你也可以給圖象設定z-index。（對於Communicator，最好將 <IMG>標籤包在<SPAN>或 <DIV>標籤內，然後將z-index應用到<SPAN>或 <DIV>。）
● 5．剪輯絕對定位單元 （clip）
絕對定位單元可以被剪輯——也即剪輯顯示給使用者的區域，只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文字和影象的網路頁面，這並不是一個很有用的特徵。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支援多媒體頁面，它們通過文件的指令碼介面動態地調整單元周圍的剪輯區，從而實線文字“劃入”和影象漸顯等顯示特徵。
在CSS中，剪輯通過 clip 特性來控制，這一特性只能用於絕對定位單元，其預設值為 auto，按單元的外邊緣來剪輯單元（實際上等於沒有剪輯）。另外，可通過如下表達式設定剪輯框：
clip : rect(top,right.bottom,left) ;
其中 top、right、bottom 和 left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對於被剪輯單元左上角的位置。Top、right、bottom 和 left 的值可以為任意絕對或相對長度值（但不能為百分比值），或者是關鍵字 auto。取值為 auto 意味著剪輯區域的各邊放好以後，被剪輯單元中的任何內容都不會超出這個區域。
● 6．控制單元溢位 （overflow）
固定絕對或相對定位單元的 width 和 height，很可能會因為指定的區域不能滿足單元實際內容的需要，而造成單元內容溢位。這時可使用 overflow 來指定瀏覽器如何處理溢位：值 none（預設值）允許瀏覽器顯示溢位的內容，因此單元可溢位指定的區域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內容，這樣，超出指定區域的單元內容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內容（同 clip），不過，瀏覽器應該（如果可能的話）為單元提供滾動條以使使用者能通過滾動來瀏覽被剪輯的內容。