前端基礎 定位

2021-09-27 13:28:35 字數 705 閱讀 8365

1.絕對定位

如果所有的父元素都沒有顯式地定義position屬性,那麼所有的父元素預設情況下position屬性都是static。結果,絕對定位元素會被包含在初始塊容器中。這個初始塊容器有著和瀏覽器視口一樣的尺寸,並且元素也被包含在這個容器裡面。簡單來說,絕對定位元素會被放在元素的外面,並且根據瀏覽器視口來定位。也可以理解成定位的元素現在相對於元素。

z-index值影響定位元素位於該軸上的位置;正值將它們移動到堆疊上方,負值將它們向下移動到堆疊中。預設情況下,定位的元素都具有z-index為auto,實際上為0。

請注意,z-index只接受無單位索引值;你不能指定你想要乙個元素是z軸上23畫素—— 它不這樣工作。 較高的值將高於較低的值,這取決於您使用的值。 使用2和3將產生與300和40000相同的效果。

3.固定定位

還有一種型別的定位覆蓋——fixed。 這與絕對定位的工作方式完全相同,只有乙個主要區別:絕對定位固定元素是相對於 元素 表示乙個html文件的根(頂級元素),所以它也被稱為根元素。所有其他元素必須是此元素的後代。" href="">元素或其最近的定位祖先,而固定定位固定元素則是相對於瀏覽器視口本身。這意味著您可以建立固定的有用的ui專案,如持久導航選單。

大前端基礎之定位

網頁布局經常要使用一些定位,定位使網頁更加的靈活方便。1.static 靜態定位 position的預設定位值,預設文字流的狀態,不會識別left right top bottom指定的座標。2.absolute 絕對定位 參照物 幫塊一該元素的祖先級元素 a 參照物 按照已經有定位的父元素進行位置...

(六)前端基礎之定位,層級

一,定位 定位 將指定元素放到頁面任意位置 position static 預設值 沒有定位,1 元素出現在正常文件流中 忽略top,left,right,bottom,z index宣告 2 當position非static時可以通過top left,right,bottom 四個屬性來設定元素的...

WEB前端 定位

可以使元素定位到相對于父元素或另乙個元素甚至瀏覽器視窗本身的位置。div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素會單獨占用一行。而span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中,即 行內框 文字 p元素html預設的文件流,從上到下排列,乙個塊級元素占...