css position的使用

標籤：style   code   ext   color   使用   html   

css position的使用

css 的 position 屬性是用來設定元素的位置的,它還能設定一個元素出現在另一個元素的下層元素能用 top,bottom,left 和 right 屬性設定位置, 但是在預設情況下是不管用的,除非先設定了position屬性,HTML 元素的位置預設是設定為靜態(static)的, 位置設定為靜態元素的位置通常是根據正常的頁面流向(flow)設定的位置為靜態元素是不能 bottom,left,right 影響的

共有四個不同的position設定方法

fixed 固定在某一位置不動 

採用fixed position 的元素位置的設定相對於瀏覽器視窗

視窗滾動它也不會移動

relative 相對位置指的是相對於它自己正常的位置 

側重於相對於自身位置變化,設定relative後,可以用top,left 等屬性, 以自身為參照物,進行相對位置調節. 另外, 還有另外一個作用, 就是成為 position設定為absolute的子項目(絕對位置元素)的定位上下文, 絕對位置元素的預設定位上下文是body.

absolute 相對於第一個(緊包著的,最裡層的)父元素 

如上所說,如若沒有相對定位的祖先元素作為參照物, 內部的div只能以預設的定位上下文body作為參照物, 相對於body進行絕對位置. 此時, 內部div完全無視其父元素的存在.

overlapping 疊搭 

通過設定 position 並配合 z-index