CSS中四種定位的區別

2021-09-11 09:29:15 字數 1503 閱讀 5052

1、預設static

(1)static表示沒有定位,或者說不算具有定位屬性。

(2)如果元素 position 屬性值為 static(或者未設 position 屬性),該元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

2、相對定位relative

佔據空間相對於自身原有位置進行偏移,可能會覆蓋其他元素。

例如:top: 20px;// 向下移動20px

3、絕對定位absolute

不佔空間,相對於最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標準。如果無已定位祖先元素, 以body元素為偏移參照基準。

所以,父元素一般設定為相對定位

4、固定定位fixed

不佔空間相對於視窗來定位,這意味著即便頁面滾動,它還是會停留在相同的位置。乙個固定定位元素不會保留它原本在頁面應有的空隙。

例項

lang

="en"

>

>

charset

="utf-8"

>

>

四種定位的區別title

>

>

body

.container

.main

.right

.container2

.main2

#fixed

style

>

head

>

>

>

相對定位h2

>

class

="container"

>

class

="main"

>

div>

class

="right"

>

div>

div>

>

絕對定位h2

>

class

="container2"

>

class

="main2"

>

div>

div>

>

固定定位h2

>

>

滾動條檢視 固定定位 效果p

>

"fixed"

>

固定定位的小框框div

>

body

>

html

>

CSS中的四種定位

簡介 偏移量 當元素開啟了定位以後,可以通過偏移量來設定元素的位置 相對定位 定位 positio 簡介 定位是一種更加高階的布局手段,通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位 static 預設值,元素是靜止的沒有開啟定位 relative 開啟元素的相對定位 a...

css中定位position的四種屬性

position relative absolute static fixed static 自動定位,自動定位就是元素在頁 面普通文件流中由html自動定位,普通文件裡中的元素也稱為流動元素。不能通過z index進行層次分級。relative 相對定位,相對定位不脫離文件流,參考其在原來文件流中...

CSS四種定位方式的詳解

1 static 靜態定位 預設值。沒有定位,元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 參考上篇隨筆。2 relative 相對定位 定位為relative的元素脫離正常的文件流,但其在文件流中的位置依然存在,只是視覺上相對原來的位置有移動。...