CSS定位屬性Position詳解

2022-08-28 16:15:19 字數 964 閱讀 1094

css定位屬性position詳解

1. position:static

相對定位元素會相對於它在正常流中的預設位置偏移。

即所有元素的預設定位都是:position:static,這意味著元素沒有被定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

一般來說,不用指定 position:static,除非想要覆蓋之前設定的定位。

2. postion:absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位.元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定. 並脫離文件流(即脫離原來的位置,不會影響其他原來的同級元素;相當於父元素內元素位置,但此元素卻存在)。

注意:如父div 是static 定位,則元素的位置可通過 "left", "top", "right" 以及 "bottom" ; "margin"; "padding"屬性進行規定,但仍脫離文件流。不同:設定top,left等屬性則以body為基準;如設定margin,padding則以第一父元素為基準。

3.position:relative

生成相對定位的元素,相對於其正常位置進行定位。可設定top, left, margin, padding 其中設定top,margin-top 效果一樣。

4.position:fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

CSS 定位position屬性

div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容,即 塊框 與之相反,span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中,即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block,可以讓行內元素...

CSS 定位屬性position

一 position 屬性 規定元素的定位型別。即元素脫離文件流的布局,在頁面的任意位置顯示。有4種不同型別的定位 absolute 絕對定位 脫離文件流的布局,遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相...

CSS定位屬性Position詳解

css中最常用的布局類屬性,乙個是float css浮動屬性float詳解 另乙個就是css定位屬性position。所有元素的預設定位都是 position static,這意味著元素沒有被定位,而且在文件 現在它應該在的位置。一般來說,不用指定 position static,除非想要覆蓋之前設...