css 的幾種定位

2021-10-03 07:27:26 字數 1096 閱讀 5540

css position(定位)

position 屬性值的含義:

static

html 元素的預設值,也就是說沒有定位,遵循正常的文件流物件。

靜態定位的元素不會受到 top, bottom, left, right影響。

div

relative

相對定位元素的定位是相對其自身的位置進行定位。

.

left

.right

相對定位元素經常被用來作為絕對定位元素的容器塊。

absolute

絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於:

絕對定位使元素完全脫離檔流,元素原先在正常文件流中所佔的空間會關閉,就好像元素原來不存在一樣。

注意:absolute 定位使元素脫離文件流,因此不佔據空間。

absolute 定位的元素和其他元素重疊。

div

fixed

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

元素脫離文件流。

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

div

注意:

fixed 定位在 ie7 和 ie8 下需要描述 !doctype 才能支援。

fixed定位使元素脫離文件流,因此不佔據空間。

fixed定位的元素和其他元素重疊。

元素的定位與文件流無關,所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了乙個元素的堆疊順序(哪個元素應該放在前面,或後面)

乙個元素可以有正數或負數的堆疊順序:

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

如果兩個定位元素重疊,沒有指定z - index,那麼先寫的元素將會被後寫的覆蓋。

div

div1

CSS 的幾種 position 定位

1 static 靜態定位,所有標準文件流中的元素預設值。該關鍵字指定元素使用正常的布局行為,即元素在文件常規流中當前的布局位置。此時 top right bottom left 屬性無效。2 relative 相對定位,上浮但不脫離標準文件流。該關鍵字指定元素會相對於自身標準文件流中的位置進行相應...

css中的幾種定位的區別

這是沒有加任何定位的文件流 1 直接上圖看效果,下面這張圖是給紅色div設定了position absolute 絕對定位,你也看到絕對定位使紅色div脫離了文件流。2 現在給紅色的div 設定相對定位 position relative 從下圖可以看出紅色div並沒有脫離文件流,我們可以給此時的紅...

對CSS中幾種定位的認識

1 靜態定位 static left right top bottom z index等屬性無效。2 絕對定位 absolute 將被賦予絕對定位的元素從文件流中拖出,使用left right top bottom等屬性相對於其最接近的乙個最有定位設定的父級元素進行絕對定位,如果元素的父級沒有設定定...