(2018-05-02.Python從Zero到One)二、(前端)CSS__1.2.9定位

上一篇文章為:→1.2.8浮動

定位

關(guān)于定位

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

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

定位元素特性

絕對定位和固定定位的塊元素和行內(nèi)元素會自動轉(zhuǎn)化為行內(nèi)塊元素

定位元素層級

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

典型定位布局

1、固定在頂部的菜單
2、水平垂直居中的彈框
3、固定的側(cè)邊的工具欄
4、固定在底部的按鈕


下一篇文章為:→1.2.10background屬性
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容