HTML_定位網頁元素

標籤：pac   pos   解決   lin   位置   abs   html   設定   ash   

一.position屬性

     意指:盒子的位置。

四個屬性:

1.static:預設值，沒有定位，元素按照標準文檔流進行布局。

2.relative:相對定位，使用相對定位的盒子位置以標準文檔流進行的排辦方式為基礎，然後使盒子相對於他原本的位置位移指定的距離。相對定位的盒子仍然在標準文檔流中，其後的盒子仍以標準文檔流當是對待它。

3.absolute:絕對位置，盒子的位置以包含他的盒子為基準進行位移。絕對位置的盒子從標準文檔流中脫離。這意味著他們對其後的其他盒子的定位沒有影響，對於其他的盒子來說就好像這個盒子不存在一樣。

4.fixed:固定定位，他和絕對位置類似，只是以瀏覽器視窗為基礎進行定位，也就是說當拖動瀏覽器視窗的捲軸時，依然保持對象位置不變。

 例

……<div id="father">  <div id="fir">第一個盒子</div>  <div id="sec">第二個盒子</div>  <div id="thi">第三個盒子</div></div>﹉﹉

　　

div{ margin:10px;padding:5px;line-height:25px;}＃father{ border:1px solid; padding:0px;}#fir{nackground-color:#F2BB6F;border:1px dashed;}……

　　＃設定相對定位元素的規律＃

1)設定相對定位的盒子會相對他原來的位置，通過指定的位移，到達新的位置。

2)設定相對定位的盒子扔在標準文檔中，他對父級盒子和相近的盒子都沒有任何影響。

3)設定相對定位的盒子原來的位置會被保留下來。

          #絕對位置#

1)使用絕對位置的元素以他最近的一個“已定位”的“祖先”元素為基準進行位移。如果沒有已定位的祖先元素，那麼以瀏覽器為基準進行定位。

2)絕對位置的元素從標準文檔流中拖影，這意味著他們√其他元素的定位不會造成影響。

       ^O^相對定位的特性:

1）相對定位自己的初始位置來定位。

2）元素位置發生位移後，他的原來位置會被保留下來。

3）層次提高，可以把標準文檔流的元素及浮動元素蓋在下面。

        使用情境

1）相對定位一般情況很少單獨用，都是配合絕對位置使用，為絕對位置創造父級而不是位置位移。

      ^O^絕對位置的特性:

1）絕對位置相對他的定位父級的位置來定位的。

2）元素位置發生位移後，他原來的位置不會被保留下來。

3）層次提高，可以把標準文檔流中的元素及浮動元素蓋在下面。

4）設定絕對位置的元素脫離文檔流。

         使用情境

1）一般情況下，絕對位置用在下拉式功能表，焦點圖輪播，跳出數字泡，特別等情境

二.z-index屬性

用來解決覆蓋的元素他們上下位置

z-index:(數字);

兩個屬性:

1.opacity:x    值為0～1

2.filter:alpha  值為0～100

由於瀏覽器的相容，一般情況兩個同時使用。

 

HTML_定位網頁元素