————8 定位網頁元素————

51.Position屬性：指定盒子的位置，相對它父級的位置或它自身應該在的位置。

(1)static 默認無定位，元素按照標準文檔布局。

(2)relative相對定位

a.特性:

1.以標準文檔流排版為基礎，相當于它在原來位置偏移指定的距離。

2.元素位置偏移后，仍會保留原位置。

3.層級提高，可以遮蓋標準文檔流元素和浮動元素。

b.使用場景：

相對定位可以不設偏移量，讓后面的絕對定位以它為祖先元素作基準定位。

c.語法 position:relative,指定偏移量時：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如div{

position: relative;

top:-20px;

left:20px;

}

(3)absolute絕對定位

a.特性：

1.以已定位的祖先元素作基準定位，如果沒有定位的祖先元素，則以瀏覽器窗口為基準定位。

2.元素位置偏移后，不保留原位置(其他元素可以用它原來的空位)

3.層級提高，可以遮蓋標準文檔流元素和浮動元素。

4.設置絕對定位的元素脫離文檔流，對其他盒子的定位無影響

b.使用場景：下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等。

(4)fixed固定定位

a.特性：直接以瀏覽器窗口為基準定位，偏移位置不受窗口滾動條滾動的影響。

b.使用場景：窗口邊緣的固定廣告、返回頂部圖標、邊緣固定導航欄等。

52.z-index屬性：設置定位元素的堆疊順序。默認值0，值大的層位于值小層的上方。

(1)網頁中的元素都含有兩個堆疊層級，一個是未設置絕對定位時所處的環境，此時z-index是0；另一個是設置絕對定位時所處的堆疊環境，此時層的位置由z-index的值確定。

53.設置元素透明度的方法(通常兩種方法搜設置以適應所有瀏覽器兼容)

(1)opacity:x x值為0~1，值越小越透明

(2)filter:alpha(opacity=x) x值為0~100，值越小越透明

HTML CSS整理筆記更多筆記

總結

以上是生活随笔為你收集整理的html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素的全部內容，希望文章能夠幫你解決所遇到的問題。

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