關於CSS定位的一些總結

2022-09-12 09:45:18 字數 1363 閱讀 7718

所有主流瀏覽器都支援 position 屬性。position屬性規定元素的定位型別,影響元素框生成的方式。值描述

absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位,如果不存在這樣的父元素,則依據最初的包含快。根據使用者**的不同,最初的包含塊可能是畫布或 html 元素。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定,也可以通過z-index進行層次分級。

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

fixed

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

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

(元素框的表現類似於將 position 設定為 absolute,不過其包含塊是視窗本身。)

relative

生成相對定位的元素,相對於其正常位置進行定位。

因此,"left:20" 會向元素的 left 位置新增 20 畫素。

(相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。元素框偏移某個距離。元素仍保持其未定位前的形狀,仍保留原本所佔的空間。 )

static

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

(元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,行內元素則會建立乙個或多個行框,置於其父元素中。)

inherit

規定應該從父元素繼承 position 屬性的值。

css 定位屬性允許你對元素進行定位。

屬性描述

position

把元素放置到乙個靜態的、相對的、絕對的、或固定的位置中。

top定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

right

定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

bottom

定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left

定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow

設定當元素的內容溢位其區域時發生的事情。

clip

設定元素的形狀。元素被剪入這個形狀之中,然後顯示出來。

vertical-align

設定元素的垂直對齊方式。

z-index

設定元素的堆疊順序。

關於css定位的一些自我總結

在瀏覽 時 我們經常會看到一些 文字在上面 導航欄一直在頁面的最上面之類的 css定位position允許你對元素進行定位 它常用的屬性值一般為5個分別為 static 預設值 設定該屬性是元素會正常顯示 不會識別 left right top bottom指定的座標 absolute 絕對定位,相...

關於css定位的一些理解

static 預設值。無特殊定位,物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z index屬性定義 fixed ...

關於CSS學習的一些總結

接觸css有很長的一段時間了,我對它的感情每次都有些不同,簡單 費解 神奇 好玩 css就是這麼一門不正交的語言,你無需一步步從頭學起,它就像樂高積木,學會了一點就能用上一點。儘管css不正交,屬性也比較多不好記,但沒關係,你只要記住用的最多的幾種方法足矣應付業務中大部分需求 除了以上用的最多的幾種...