HTML_定位網頁元素

一.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

因爲瀏覽器的兼容，通常狀況兩個同時使用。