三層DIV定位，三層div

三層DIV定位，三層div

CSS的position有三種屬性:static, relative, absolute，如果DIV套DIV，達到多層，這些層間的定位關係又是怎樣的呢？

1、只要父容器的postion屬性不為static，組件就會以父容器作為定位基準，否則找上一級可定位的容器作為基準。

2、上一級定位容器的relative和absolute對應的定位位置有差異，一個不包含邊框寬度，一個包含邊框寬度

注意：在定位的過程中，在設定大小的前提下，不能同時設定top和bottom屬性，否則顯示結果會出乎意料，在設定一個屬性時，清除另一個屬性，方法：

div.style.top = '';

不能用：

delete div.style.top。

下面是三層DIV定位的關係表：

	最外層（父父容器）	次外層（父容器）	組件（position=absolute）定位	說明
1	relative	static	內容區+邊框寬度定位	以最外層容器為定位基準，與margin屬性無關
2	absolute	static	內容區定位	以最外層容器為定位基準，與margin屬性無關
3	relative或absolute	relative	內容區定位	以次外層容器為定位基準
4	relative或absolute	absolute	內容區定位	以次外層容器為定位基準
	最外層（父父容器）	次外層（父容器）	組件（position=relative）定位
1			頂0%與底0%作用相等，底邊0%位置即組件在父容器中流動到的最後位置下底邊的位置
2			底邊100%的位置，在0%底邊位置基礎上再上移父容器內容高度（不包括邊框）	如父容器高300，上下邊框各10px高，則內容區高度為280px。
3
4

DIV層定位

用絕對位置 position：absolute :
例子：box{ position：absolute :top:10px; right:20px; bottom:30px; left:40px;} 絕對位置 離上10px 右20px 下30px 左40px

相對定位 顧名思義 相對於誰定位 要有個目標 比如<div class="box"><div class="box1"><div></div>
box1要相對於box定位 離box的上面有20px 那麼 樣式 box{ position:relative;} box1{ position：absolute :top:20px;}

注意 相對定位 要是父子關係！~
 
DIV相對於父DIV絕對位置

父DIV設定為相對定位，子DIV設定為絕對位置。
<div style="height:158px; width:158px; position:relative;">
Test001
<div style="height:158px; width:158px; filter: alpha(opacity=45); opacity:0.45; position:absolute; left:0; top:0;">
Test002<br/>
</div>
</div>
父級的相對定位：是要把子DIV的絕對位置的起點以父DIV左上方為起點，如果沒有就預設螢幕左上方了。
子DIV的絕對位置：是無視父DIV下別的元素。然後就是left:0; top:0; 這個是用來定位的

希望對你有協助