詳解css 定位與定位應用

2021-06-22 06:01:08 字數 1232 閱讀 7959

原文:

定位的定義:

在css中關於定位的內容是:position:relative | absolute | static | fixed

static 沒有特別的設定,遵循基本的定位規定,不能通過z-index進行層次分級。

relative 不脫離文件流,參考自身靜態位置通過 top,bottom,left,right定位,並且可以通過z-index進行層次分級。

absolute 脫離文件流,通過 top,bottom,left,right定位。選取其最近的父級定位元素,當父級 position 為 static 時,absolute元素將以body座標原點進行定位,可以通過z-index進行層次分級。

fixed 固定定位,這裡他所固定的對像是可視視窗而並非是body或是父級元素。可通過z-index進行層次分級。

css中定位的層疊分級:z-index: auto | namber; 

auto 遵從其父物件的定位

namber  無單位的整數值。可為負數

定位的原理:

可以位移的元素 (相對定位

在本文流中,任何乙個元素都被文字流所限制了自身的位置,但是通過css我們依然使得這些元素可以改變自己的位置,我們可以通過float來讓元素浮動,我們也可以通過margin來讓元素產生位置移動。但是事實上那並非是真實的位移,因為,那只是通過加大margin值來實現的障眼法。而真正意義上的位移是通過top,right,bottom,left(下稱trbl,trbl可以折分使用。)針對乙個相對定位的元素所產生的。我們看下面的圖:

我們看圖中是乙個寬度為200px,高度為50px,margin:25px; border:25px solid #333; padding:25px; 相對定位的元素,並且位移距上50px,距左50px。而下方是一塊預設定位的黑色區塊。我們看到這個處在文字流的區塊被上面的相對…………………………………………………………………………

詳解定位與定位應用

定位一直是web標準應用中的難點,如果理不清楚定位那麼可能應實現的效果實現不了,實現了的效果可能會走樣。如果理清了定位的原理,那定位會讓網頁實現的更加完美。定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 沒有特別的...

詳解定位與定位應用

定位一直是web標準應用中的難點,如果理不清楚定位那麼可能應實現的效果實現不了,實現了的效果可能會走樣。如果理清了定位的原理,那定位會讓網頁實現的更加完美。定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 靜態 沒有...

詳解CSS絕對定位與相對定位

引伸閱讀 解讀absolute與relative position relative absolute無法衝破的等級 定位一直是web標準應用中的難點,如果理不清楚定位那麼可能應實現的效果實現不了,實現了的效果可能會走樣。如果理清了定位的原理,那定位會讓網頁實現的更加完美。定位的定義 在css中關於...