css定位機制

2022-07-02 06:27:11 字數 1528 閱讀 9119

每次用div+css布局的時候都混亂的不行,所以決定仔細梳理一遍,加強理解和記憶^^。

css 有三種基本的定位機制:普通流、浮動和絕對定位。除非專門指定,否則所有框都在普通流中定位。塊級框從上到下乙個接乙個地排列,框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是,垂直內邊距、邊框和外邊距不影響行內框的高度。

「文件「」就是網頁的頁面,doctype;「流」就是指頁面上的元素輸入輸出的形式和順序,其中「輸入」是布局,輸出是「顯示」;綜合起來就是:頁面布局+顯示的形式。

在css中,通過position屬性,配合top,right,left,buttom對元素進行定位。

position屬性有:static,relative,absolute,fixed,下面來詳細分析:

1.預設定位:static
塊元素相對於瀏覽器布局,一行乙個,自動換行。

顯示結果:

2.相對定位:relative

相對定位就應該是相對於乙個東西來定位,而這個東西就是元素自己本身,用left right top b0ttom進行定位後,元素會根據原來的位置進行移動,但由於position:relative這個屬性並沒有脫離文件流的,所以元素本身所佔的位置會保留。

顯示結果:

塊二通過position:relative相對於原來的位置左移50px; 上移20px得到的,而且塊三並沒有因為塊二的上移而上移,原因就是position:relative這個屬性是沒有脫離文件流的,所以元素本身所佔的位置會保留。

3.絕對定位:absolute

所謂絕對定位,其實也是相對於某個東西來絕對定位,而這個東西就是靠元素的最近的乙個有position,且positon不能為static的祖先元素,一般來說是position為relative的父級元素,如果沒有,則相對於body定位;值得注意的是position:absolute這個屬性是脫離文件流的,所以重新定位後元素是不會佔著原來的位置的,從原來的文件中分離被孤立了出來。

顯示結果:塊二相對於dad塊下邊界20px,相對於dad塊左邊界50px;而塊三向上移動佔據了本來屬於塊二的位置,原因在於position:absolute這個屬性是脫離文件流的,所以重新定位後元素是不會佔著原來的位置的,從原來的文件中分離被孤立了出來。

4.固定定位:fixed

元素框的表現類似於將 position 設定為 absolute,不過其包含塊是視窗本身,它的位置始終相對於視窗,可以實現固定導航欄的效果,也這意味著即便頁面滾動,它還是會停留在相同的位置, top 、 right 、 bottom 和 left 屬性都可用。

css定位機制

定位屬性position 相生相剋 1 static 靜態定位 2 relative 相對定位 相對於自己原來的位置定位 3.absolute 絕對定位 float 具有強大的破壞性,父容器管不住 4.fixed 固定定位 相對於瀏覽器定位不是相對於文件定位 css其他定位屬性 1 z index ...

CSS定位機制

在css的定位機制中,分別有如下三種 1.文件流 2.浮動 float 3.定位 position 所謂文件流,即元素排版布局過程中,元素會自動從左往右,從上到下的流式排列。脫離文件流,即將元素從普通的布局排版中拿走 打亂排列順序 其他盒子在進行定位的時候,會當做脫離文件流的元素不存在而進行定位。p...

CSS定位機制

將各個盒子進行定位 是一種預設方式,各個盒子從上到下,從左到右排列 元素分為三類,包括block inline inline block型別 display none 元素不被顯示 像影象軟體中的圖層一樣可以對每個layer能夠精確定位操作,用position屬性 相對於誰定位 進行設定 通過top...