網頁布局經常要使用一些定位,定位使網頁更加的靈活方便。
1.static 靜態定位:
position的預設定位值,預設文字流的狀態,不會識別left right top bottom指定的座標。
2.absolute 絕對定位(參照物:幫塊一該元素的祖先級元素)
a:參照物:按照已經有定位的父元素進行位置的變化。
b:假如沒有父元素或者沒有定位的情況下,以整個文件為參照物。
c:絕對定位,脫離文件流,不佔據空間
如果有定位祖先元素相對於定位祖先元素發生偏移,沒有定位祖先元素相對於整個文件發生偏移(絕對、相對、固定)
注:如果祖先元素中有多個元素具備定位模式,那麼是已離自己最近的祖先元素進行偏移。預設情況下是相對可視視窗進行定位的。
3: relative 相對定位:(參照物:自己所在的位置)
a : 參照物:自身預設的位置!
b : 始終佔據空間,不會破壞文件流
c:不影響其他元素布局
left、top、right、bottom是相對於當前元素自身進行偏移的 ,不能獨自存在,必須配合定位元素一起使用 。
4、固定定位: fixed (參照物:始終都是 相對於整個瀏覽器視窗進行固定定位的)
使元素完全脫離文件流
使內聯元素支援寬高 (讓內聯具備內聯塊特性)
使塊元素預設寬根據內容決定(讓塊具備內聯塊的特性)
相對於整個瀏覽器視窗進行偏移,不受瀏覽器滾動條的影響不會受到祖先元素的影響。
5、 黏性定位: sticky
在沒有到達指定位置的時候,是沒有定位效果的,到達了指定位置,就變成了固定模式。
包含塊的設定:
1:如果父元素為參照物:新增 position:relative;
2: 給要做定位的子元素 新增position:absolute;
定位元素:
後定位的元素會把前面定位的 蓋住。
z-index:
控制定位元素的層次關係
屬性值為乙個數字(可以為負數),數字越大,層次關係越高
預設值 auto;
注:他只針對於具有定位屬性的元素起作用;
如果對乙個父元素設定relative,而對它的子元素設定absolute,如:
前端基礎 定位
1.絕對定位 如果所有的父元素都沒有顯式地定義position屬性,那麼所有的父元素預設情況下position屬性都是static。結果,絕對定位元素會被包含在初始塊容器中。這個初始塊容器有著和瀏覽器視口一樣的尺寸,並且元素也被包含在這個容器裡面。簡單來說,絕對定位元素會被放在元素的外面,並且根據瀏...
(六)前端基礎之定位,層級
一,定位 定位 將指定元素放到頁面任意位置 position static 預設值 沒有定位,1 元素出現在正常文件流中 忽略top,left,right,bottom,z index宣告 2 當position非static時可以通過top left,right,bottom 四個屬性來設定元素的...
定位效果 大前端頁內定位實現
目標 實現網頁點選跳轉到指定標籤 實現原理 在網頁內a標籤的href後面寫上 a,然後再在下面想定位的元素那加個name為a的,這樣兩者就建立起了對應關係。下面是個簡單演示,如圖 如下 color ff6600 sjkx color ff6600 1.面向過程 color ff6600 sjka c...