首頁 > web前端 > 前端問答 > css定位方式有哪幾種

css定位方式有哪幾種

青灯夜游
發布: 2023-01-04 09:35:25
原創
14800 人瀏覽過

css定位方式有5種:1、浮動定位(float)。 2、static(靜態定位);沒有定位,元素出現在正常的流中。 3、relative(相對定位);元素脫離正常的文檔流。 4、absolute(絕對定位)。 5、fixed(固定定位)。

css定位方式有哪幾種

本教學操作環境:windows7系統、CSS3版、Dell G3電腦。

複雜的網頁佈局都是透過各種網頁元素靈活定位實現的,網頁中的各種元素定位都有自己的特色。下面我們來看看css的幾種定位方式。

float定位(即浮動定位):

這種定位方式很簡單,只需規定一個浮動的方向(如:float:left;就表示這個元素向左邊擺放),它的定位是相對於父元素容器;

如果該元素設置了浮動,後面緊鄰的則會受到浮動的影響,因此需要後面的元素若要不受影響,則要在後面清除浮動(可用clear:both;等方法),在兩個相鄰元素設定相同浮動的情況下,兩個元素將依序相鄰擺放。這種定位使得元素脫離文檔流。

position定位:

position定位是指定位置的定位,以下為常用的幾種:

1、static(靜態定位):

當我們沒有指定定位方式的時候,這時預設的定位方式就是static,也就是按照文件的書寫佈局自動分配在一個適當的地方,這種定位方式用margin來改變位置,對left、top、z- index等設定值無效,這種定位不脫離文檔流;

2、relative定位(相對定位):

該定位是一種相對的定位,可以透過設定left、top等值,使得指定元素相對其正常的位置進行偏移,這種定位不脫離文檔流;

3、absolute定位(絕對定位):

這種定位透過設定top 、right、bottom、left這些偏移值,相對於static 定位以外的第一個父元素進行定位(這種定位通常設置父元素為relative定位來配合使用),在沒有父元素的條件下,它的參考為body,該方式脫離文件流;

4、fixed(固定定位):

這種定位方式是相對於整個文件的,只需設定它相對於各個方向的偏移值,就可以將該元素固定在頁面固定的位置,通常用來顯示一些提示訊息,脫離文檔流;

(學習視頻分享:css視頻教程

以上是css定位方式有哪幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板