一.position屬性

意指:盒子的位置。

四個屬性:

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

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

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

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

例

……

第一個盒子第二個盒子第三個盒子

﹉﹉

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网页定位,HTML_定位网页元素(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。