2.能夠在任意一個位置的元素(絕對定位)
相對定位只能夠在文本流中進行位置的上下左右的移動,一樣存在必定的侷限性,雖然他的表現區脫離了文本流,可是在文本流卻依然爲其保留了一席之地,這就好 比一個打工的人他到了外地,可是在老家依然有一個專屬於他的位置,這個位置不隨他的移動而改變。可是這樣很明顯就會空出一塊空白來,若是但願文本流拋棄這 個部分就須要用到絕對定位。絕對定位不光脫離了文本流,並且在文本流中也不會給這個絕對定位元素留下專屬空位。這就比如是一個工廠裏的職位,若是有一個工 人走了天然會要有別的工人來填充這個位置。而移動出去的部分天然也就成爲了自由體。絕對定位將能夠經過TRBL來設置元素,使之處在任何一個位置。在父層 position屬性爲默認值時,TRBL的座標原點以body的座標原點爲起始。看下圖:
上圖可知,文本流中的內容會頂替絕對定位無素的位置,一點都不會客氣。而絕對定位元素天然的層疊於文本流之上。而在單一的絕對定位中,定位元素將會跑到網頁的左上角,由於那裏是他們的被絕對定位後的座標原點。
3.被關聯的絕對定位
實際的應用中咱們經常會須要用到一種特別的形式。即但願定位元素要有絕對定位的特性,可是又但願絕對定位的座標原點能夠固定在網頁中的某一個點,當這個點 被移動時絕對位定元素能保證相對於這個原座標的相對位置。也就是說須要這個絕對定位要跟着網頁移動,而而且是因定在網頁的某一個固定位置。一般當網頁是居 中形式的時候這種效果就會顯得特別的重要。要實現這種效果基本方式就是爲這個絕對定位的父級設置爲相對定位或是絕對定位。那麼絕對定位的座標就會以父級爲 座標起始點。
雖然是如此,可是這個座標原點卻並非父級的座標原點,這是一個很奇怪的座標位置。咱們看一下模型圖示:
瀏覽器
咱們看到,這個圖中父級爲黑灰色區塊,子級爲青色區塊。父級是相對定位,子級是絕對定位。子級設置了頂部位移50個像素,左傾位移50個像素。那麼咱們看,子級的座標原點並非從父級的座標原點位移50個像素,而是從父級塊的padding左上邊緣點爲座標起始點(即A 點)。而父級這裏若是要產生位置移動,或是瀏覽器窗口大小有所變更都不會影響到這個絕對定位元素與父級的相對定位元素之間的位置關係。這個子級也不用調整數值。 spa
4.總在視線裏的元素 (固定定位)position:fixed; 他的含義就是:固定定位。這個固定與絕對定位很像,惟一不一樣的是絕對定位是被固定在網頁中的某一個位置,而固定定位則是固定在瀏覽器的視框位置。 對象