CSS positon z-index
阿新 • • 發佈:2018-12-15
總結:
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都會導致元素脫離文件流,由此就會產生相應的問題。