css定位的型別和使用方法

2021-09-19 16:44:15 字數 856 閱讀 5399

css 定位屬性

css 定位屬性允許你對元素進行定位。

屬性 描述

position 把元素放置到乙個靜態的、相對的、絕對的、或固定的位置中。

top 定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow 設定當元素的內容溢位其區域時發生的事情。

clip 設定元素的形狀。元素被剪入這個形狀之中,然後顯示出來。

vertical-align 設定元素的垂直對齊方式。

z-index 設定元素的堆疊順序。

一、position定位

1、static

靜態定位(無定位)

2、relative(絕對定位)

遵循正常的文件流,相對自己的原位置定位,定位後原位置保留。 top,right,left,bottom值可選

3、absolute(絕對定位)

脫離正常的文件流,不保留原位置,運用top,right,left,bottom進行定位,一般選兩個值。

必須是父子級定位,如果父級沒有定位,就會逐級往上找,直到以瀏覽器為定位。

4.fixed(固定定位)

脫離文件流,不保留原位置,相對於瀏覽器視窗定位,出現滾動條時不滾動。

二、z-index

設定元素的疊放順序,處理靜態定位的其他定位方式都能使用,z-index的值越高,疊的位置就越在上面,z-index的值可以為負。 因為兩個元素同時定位,元素會被遮蓋。所以需要設定誰在上面,誰在下面。

CSS定位使用方法

對於網頁頁面布局來說,使用定位進行布局十分的方便。絕對定位 使用絕對定位應當將父元素設定為相對定位,否則元素絕對定位的基準會一直尋找外層非靜態定位元素 doctype html html lang en head meta charset utf 8 title title title style ...

定位的使用方法

定位有著超出尋常的地位,它可以實現你想要在任何位置放置東西。定位的使用方法有很多,他可以讓你在排版不周的時候可以讓你強行任意移動任何到東西的位置。定位的乙個基礎用法,是不是每次都用a類包裹住b類,但是每次b類還是會被排擠出a類的範圍,這時候用浮動 外邊距和內邊距去排版,不用這麼麻煩。定位就可以搞定。...

CSS的使用方法

我們為網頁新增樣式表的方法有四種。1 最簡單的方法是直接新增在html的識別符號 tag 裡 tag style properties 網頁內容 tag 舉個例子 p style color blue font size 10pt css例項 p 說明 用藍色顯示字型大小為10pt的 css例項 儘...