1.8 常用CSS樣式3：定位

尹成發表於2018-11-09
CSS

關於定位

我們可以使用css的position屬性來設定元素的定位型別，postion的設定項如下：

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

定位元素特性

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

定位元素層級

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

典型定位佈局

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

 

相關文章