一.position屬性

意指:盒子的位置。

四個(gè)屬性:

1.static:默認(rèn)值，沒有定位，元素按照標(biāo)準(zhǔn)文檔流進(jìn)行布局。

2.relative:相對定位，使用相對定位的盒子位置以標(biāo)準(zhǔn)文檔流進(jìn)行的排辦方式為基礎(chǔ)，然后使盒子相對于他原本的位置偏移指定的距離。相對定位的盒子仍然在標(biāo)準(zhǔn)文檔流中，其后的盒子仍以標(biāo)準(zhǔn)文檔流當(dāng)是對待它。

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

4.fixed:固定定位，他和絕對定位類似，只是以瀏覽器窗口為基礎(chǔ)進(jìn)行定位，也就是說當(dāng)拖動瀏覽器窗口的滾動條時(shí)，依然保持對象位置不變。

例

……

第一個(gè)盒子第二個(gè)盒子第三個(gè)盒子

﹉﹉

div{

margin:10px;

padding:5px;

line-height:25px;

}

＃father{

border:1px solid;

padding:0px;

}

#fir{

nackground-color:#F2BB6F;

border:1px dashed;

}

……

＃設(shè)置相對定位元素的規(guī)律＃

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

2)設(shè)置相對定位的盒子扔在標(biāo)準(zhǔn)文檔中，他對父級盒子和相近的盒子都沒有任何影響。

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

#絕對定位#

1)使用絕對定位的元素以他最近的一個(gè)“已定位”的“祖先”元素為基準(zhǔn)進(jìn)行偏移。如果沒有已定位的祖先元素，那么以瀏覽器為基準(zhǔn)進(jìn)行定位。

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

^O^相對定位的特性:

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

2)元素位置發(fā)生偏移后，他的原來位置會被保留下來。

3)層次提高，可以把標(biāo)準(zhǔn)文檔流的元素及浮動元素蓋在下面。

使用場景

1)相對定位一般情況很少單獨(dú)用，都是配合絕對定位使用，為絕對定位創(chuàng)造父級而不是位置偏移。

^O^絕對定位的特性:

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

2)元素位置發(fā)生偏移后，他原來的位置不會被保留下來。

3)層次提高，可以把標(biāo)準(zhǔn)文檔流中的元素及浮動元素蓋在下面。

4)設(shè)置絕對定位的元素脫離文檔流。

使用場景

1)一般情況下，絕對定位用在下拉菜單，焦點(diǎn)圖輪播，跳出數(shù)字泡，特別等場景

二.z-index屬性

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

z-index:(數(shù)字);

兩個(gè)屬性:

1.opacity:x ? ?值為0～1

2.filter:alpha ?值為0～100

由于瀏覽器的兼容，一般情況兩個(gè)同時(shí)使用。

總結(jié)

以上是生活随笔為你收集整理的html网页定位,HTML_定位网页元素(示例代码)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。