CSS學習筆記 position定位(九)

2021-07-23 08:35:23 字數 2173 閱讀 6230

屬性 值 含義

position

absolute, fixed, relative, static 規定元素的定位型別

top

auto,%,length 設定定位元素的上外邊距邊界與其包含塊上邊界之間的偏移

right

auto,%,length 設定定位元素的右外邊距邊界與其包含塊右邊界之間的偏移

bottom

auto,%,length 設定定位元素的底外邊距邊界與其包含塊底邊界之間的偏移

left

auto,%,length 設定定位元素的左外邊距邊界與其包含塊左邊界之間的偏移

display

none,block,inline等 規定元素應該生成的框的型別。

overflow

visible,scroll,hidden,auto 當內容溢位元素框時發生的事情

visibility

hidden,visible 規定元素是否可見。即使不可見的元素也會佔據頁面上的空間

auto,數值 設定元素的堆疊順序

cursor

url, pointer, text, wait等 規定要顯示的游標的型別(形狀)

值 描述

absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定

relative生成相對定位的元素,相對於其正常位置進行定位。因此,」left:20」 會向元素的 left 位置新增 20 畫素。

fixed生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過」left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。

static預設值。沒有定位,元素出現在正常的文件流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

position屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成乙個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

相對定位

設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀,它原本所佔的空間仍保留。

如果將 top 設定為 20px,那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素,那麼會在元素左邊建立 30 畫素的空間,也就是將元素向右移動。

注意,在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。

設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。

絕對定位使元素的位置與文件流無關,因此不佔據空間。這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。

絕對定位的元素的位置相對於最近的已定位祖先元素(相對或絕對定位元素),如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。

值 描述

none 此元素不會被顯示

block 此元素將顯示為塊級元素,此元素前後會帶有換行符

inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符。

inline-block 行內塊元素

table 此元素會作為塊級**來顯示(類似),**前後帶有換行符。

inline-table 此元素會作為內聯**來顯示(類似),**前後沒有換行符。

table-row 此元素會作為乙個**行顯示(類似)。

table-cell 此元素會作為乙個**單元格顯示(類似和 )

CSS布局學習筆記之position

css知識點 之 position布局 其中有不少東西,來自原帖,我會在下面給出鏈結。使用position布局方式,可以分成三種,相對定位 也即position relative 絕對定位 postion absolute fixed 粘性定位 position sticky 等等。通常我們還會見到...

CSS學習之position定位

定位在css中可謂是布局的常用手段,配合浮動能使網頁布局更加的靈活多變,今天跟大家一起分享下學習定位的一點小結 css中預設不開啟定位,其元素的position屬性預設值為static。若想要元素定位,則需手動開啟定位,即設定position的屬性值可選為 relative,absolute,fix...

筆記 css中的position定位

position的值可以是 static,relative,absolute,fixed。預設值是 static。設定 left top值無效。relative是相對定位,可以設定left top bottom right值,它設相對本來的位置偏移。absolute是絕對定位,可以設定left to...