CSS position定位模型

2021-10-05 07:12:41 字數 675 閱讀 9966

大致可分為五類:自然定位(靜態定位,常規定位),相對定位,絕對定位,固定定位,磁貼定位(粘性定位,吸附定位)

屬性為static,也叫靜態定位,常規定位。其作用是將元素置於自然流中(塊,行垂直排列下去,行內水平從左到右排列)

特點:

屬性值為relative,其作用是是元素成為可定位的祖先元素,配合其後代絕對定位使用,以相對定位的元素為參照物去設定絕對定位的位置。

特點:

屬性值為absolute,其作用是使元素脫離常規流,參照物為最近定位祖先元素,設定位置或者百分比大小時,都是按照參照物來的。

特點:

.**

屬性值為fixed,其作用是將元素相對於視口定位,頁面滾動也不會改變位置。

特點:

屬性值為sticky,又叫黏性定位,吸附定位,其作用是製造出吸附性的元素塊,例如網頁頭部的導航欄,在下拉時會跟隨頁面固定在視口上方

特點:

原理:

設定偏移量後,會在設定的位置產生乙個定位矩形,當頁面滾動,被設定為磁貼定位的元素塊與矩形重合時,矩形就會捕獲元素塊,使元素塊變成固定定位,其他方位同理。

html 定位 CSS Position定位

說明position 屬性指定了元素的定位型別。position 屬性的五個值 元素可以使用的頂部,底部,左側和右側屬性定位。所有的css定位屬性 bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。值 clip 剪輯乙個絕對定位的元素 cursor 顯示游標移動到指定的型別 lef...

css position 相對定位

html head style type text css h2.pos left h2.pos right style head body h2 這是位於正常位置的標題 h2 h2 class pos left 這個標題相對於其正常位置向左移動 h2 h2 class pos right 這個標題...

CSS Position 定位屬性

本篇文章主要介紹元素的position屬性,此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...