position定位總結

2021-10-12 06:25:02 字數 866 閱讀 9348

(即沒有定位)遵循正常的文件流物件。

生成絕對定位的元素,通常相對於瀏覽器視窗或 iframe 進行定位。

元素的位置相對於瀏覽器視窗是固定位置。

即使視窗是滾動的它也不會移動:

這就如一些頁面上的側邊導航條一樣,不管你的頁面如何滾動,導航條的位置始終未有任何改變。

生成相對定位的元素,相對定位元素的定位是相對其原本位置。其原本的位置不會被其他元素所占用,而absolute則不同,其原本的位置會空出來,如果後邊還有元素,那他就會占用該空間

注:相對定位元素經常被用來作為絕對定位元素的容器塊。但是其他定位也可以作為絕對定位元素容器,static不行,因為他的意思是元素沒有定位,這個為預設值。

例子1:相對定位,其原本的位置不被占用

1我是相對定位的

例子2:絕對定位,其原本的位置會被占用

1我是絕對定位的

生成絕對定位的元素,相對於最近一級的 不是 static(static是沒有定義的) 的父元素來進行定位,如果沒有找到的話,最終是根據body進行定位。  

注:定位使元素的位置與文件流無關,因此不佔據空間。

css 定位position總結

在css中,position 屬性經常會用到,主要是絕對定位和相對定位,簡單的使用都沒有問題,尤其巢狀起來,就會有些混亂,今記錄總結一下,防止久而忘之。我們最常用的的就是 absolute 和 relative 兩種方式,所以主要討論著兩者的區別。相對定位我們主要是要知道相對於誰來進行偏移的?其實相...

定位和position定位

定位有 普通流定位 浮動定位 相對定位 絕對定位 固定定位 特點普通定位 被稱為文件流定位,是頁面元素預設的定位方式 塊級 從上到下,獨佔一行 行級 從左到右,不獨佔一行 浮動定位 1.浮動元素脫離文件流,未浮動元素上前補位 2.浮動元素會停靠在父級元素的左邊或者右邊,亦或者緊跟其他元素邊緣 3.浮...

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...