詳述CSS position樣式屬性

2021-09-23 01:55:27 字數 945 閱讀 9124

position 屬性規定元素的定位型別,這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成乙個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

常用值有static、absolute、fixed、relative四種。

①static:  預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

②fixed:  生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

③relative:  生成相對定位的元素,相對於其正常位置進行定位。

④absolute:   生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

上圖黃色區域不會隨著瀏覽器滾動條的滑動而滑動。

網頁CSS樣式 詳述margin樣式屬性

用於在乙個宣告中設定所有外邊距的寬度,或者設定各邊上外邊距的寬度。該屬性有多個值。瀏覽器計算外邊距 css中auto一般是自動適應的意思,auto在水平方向上的作用是始終居中,但在垂直方向上不起作用,相當於0值 瀏規定以具體單位計的外邊距值,比如畫素 厘公尺等。預設值是0px。注 允許使用負值,不過...

CSS position屬性用法

絕對定位 position absolute 有如下兩種情況 1,沒有設定 top right bottom left 的情況,預設依據父級的 內容區域原始點 為原始點 2,有設定 top right bottom left 的情況,這裡又分了兩種情況如下 1 父級沒 position 屬性,瀏覽器...

css position 屬性詳解

相信很多同學在編寫 設計 的時候多多少少用過css裡的position這個屬性,但是很多時候網頁顯示出來的和自己想象的不太一樣,這篇部落格來教你怎麼使用position。position屬性共有5個不同的值,下面是w3school給出的 解釋 其中,如果不對dom中的元素設定position屬性,那...