1. 程式人生 > >css-定位

css-定位

垂直居中 特性 位置 類型 絕對定位 -m 轉化 stat fixed

關於定位
我們可以使用css的position屬性來設置元素的定位類型,postion的設置項如下:

relative 生成相對定位元素,元素所占據的文檔流的位置不變,元素本身相對文檔流的位置進行偏移
absolute 生成絕對定位元素,元素脫離文檔流,不占據文檔流的位置,可以理解為漂浮在文檔流的上方,相對於上一個設置了相對或者絕對或者固定定位的父級元素來進行定位,如果找不到,則相對於body元素進行定位。
fixed 生成固定定位元素,元素脫離文檔流,不占據文檔流的位置,可以理解為漂浮在文檔流的上方,相對於瀏覽器窗口進行定位。
static 默認值,沒有定位,元素出現在正常的文檔流中,相當於取消定位屬性或者不設置定位屬性
inherit 從父元素繼承 position 屬性的值

定位元素特性
絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

定位元素層級
定位元素是浮動的正常的文檔流之上的,可以用z-index屬性來設置元素的層級

典型定位布局
1、固定在頂部的菜單
2、水平垂直居中的彈框
3、固定的側邊的工具欄
4、固定在底部的按鈕

css-定位