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的元素脫離正常的文件流,但其在文件流中的位置依然存在,只是視覺上相對原來的位置有移動。...