1. 程式人生 > >CSS positon z-index

CSS positon z-index

總結:

1. static

static定位是HTML元素的預設值,即沒有定位,元素出現在正常的流中,因此,這種定位就不會收到top,bottom,left,right的影響。

2. fixed

fixed定位是指元素的位置相對於瀏覽器視窗是固定位置,即使視窗是滾動的它也不會滾動,且fixed定位使元素的位置與文件流無關,因此不佔據空間,且它會和其他元素髮生重疊

3. relative

相對定位元素的定位是相對它自己的正常位置的定位。 如果值為負數,則直接換成整數;如果值為整數,則直接改變相對方向。

4. absolute

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

5. sticky

在一個內容中,我們可以固定一個部分,然後到了另一個內容,又會固定另外一個部分

6. 重疊的元素–z-index屬性

首先宣告:z-index只能在position屬性值為relative或absolute或fixed的元素上有效。   基本原理是:z-index的值可以控制定位元素在垂直於顯示螢幕方向(z軸)上的堆疊順序(stack order),值大的元素髮生重疊時會在值小的元素上面。

7. 脫離文件流導致的問題

我們知道如果使用position:absolute和position:fixed都會導致元素脫離文件流,由此就會產生相應的問題。