CSS之Position
CSS2.0之後添加了Position,定位屬性,主要包括四種
-
static:保持元素所在文件中的位置
元素框正常生成。塊級元素生成一個矩形框,作為文件流的一部分,行內元素則會建立一個或多個行框,置於其父元素中。
-
relative:相對於元素在文件中最原始的位置進行偏移,偏移量為設定的
top/left/right/bottom
- 參照位置為元素原始位置
- 元素形狀大小不會改變
-
元素偏移之後,元素在文件中的原始空間仍舊保留
元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。
-
absolute:絕對定位,當設定為absolute之後,會重新根據元素的填充生成一個新的塊,偏移量為設定的
top/left/right/bottom
- 參照位置為其所有父元素中,最靠近元素本身的一個設定了position為非static的元素所處位置
- 元素大小或形狀會發生改變,會根據它的子元素重新生成為一個會計元素
- 元素在文件中的原始空間不會包留,會被移除,後續其他兄弟元素補進
-
當元素沒有設定了position為非static的父元素時,相對位置為document的左上角
元素框從文件流完全刪除,並相對於其包含塊定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像元素原來不存在一樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種型別的框。
-
fixed
元素框的表現類似於將 position 設定為 absolute,不過其包含塊是視窗本身。