溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS定位的使用方法”，在日常操作中，相信很多人在CSS定位的使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS定位的使用方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
定位的使用包含兩個部分：
定位的方式
偏移值 left,right,top,bottom偏移值準確的理解是“距離什么位置有多大” 如 top:100px; 距離頂部為100像素 （向下走）。
####靜態定位
所有的標準流都是靜態定位
position:static;
一般用于將某些已經定位的元素還原成標準流，用的很少
偏移值對于靜態定位來說不起作用，我們以后說的元素定位不包括靜態定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 300px; height: 300px; background-color: red; position: static; left: 500px; top: 500px; } </style></head><body><div class="box"></div></body></html>####相對定位
相對定位是相對自己的標準流的位置進行定位移動
position:relative;
特性：
1. 移動的出發點是自身標準流的位置
2. 相對定位移動的元素不會對別的元素產生干擾，“沒有脫標”，真正占得位置還是標準流的位置（肉體不在 靈魂永駐）
3. 可以蓋在標準流的上方
4. 一般用于微調元素和配合絕對定位來實現效果
####絕對定位
position:absolute;
特性：
1.移動的出發點：
從絕對元素開始一直往上級找（直到找到最大的html標簽），在這個過程中，只要有一個元素（A元素）是定位（相對，絕對，固定）的任何一個，這個絕對定位的元素就會參照這個A元素進行定位，并且不會在往上找了，如果一個都沒有，最終會以html元素定位
2.脫標
1.1. 脫標的元素不占標準流的位置
1.2. 不會繼承父級的的寬度，內容有多個就撐多大 （不論塊級還是行內）
1.3. 可以直接寫寬高 （不論塊級還是行內）
1.4. margin:auto對于脫標元素不起作用
巧妙運用：讓一個定位盒子水平垂直居中
使用方式：
在工作中，絕對定位"大多"配合相對定位一起使用（父相子絕）
父相：在標準流上占有位置
子絕：針對這個標準流在去移動
注意：父絕子絕的情況也有，只是很少，不要完全形成思維定式。
####固定定位
特性：
1.脫標
1.1.脫標的元素不占標準流的位置
1.2.不會繼承父級的的寬度，內容有多個就撐多大 （不論塊級還是行內）
1.3.可以直接寫寬高 （不論塊級還是行內）
1.4.margin:auto對于脫標元素不起作用
2.移動的出發點：瀏覽器窗口 （直接表現：滾動條對于固定元素沒有作用）
四種定位總結
| 定位模式 | 是否脫標占有位置 | 是否可以使用邊偏移 | 移動位置基準 |
| 靜態static | 不脫標正常模式 | 不可以 | 正常模式 |
| 相對定位relative | 不脫標占有位置 | 可以 | 相對自身位置移動 |
| 絕對定位absolute | 完全脫標，不占有位置 | 可以 | 相對于定位的父級移動位置 |
| 固定定位fixed | 完全脫標，不占有位置 | 可以 | 相對于瀏覽器移動位置 |
####z-index
控制“定位”元素的疊放層級
z-index只針對定位元素有效果
z-index值越大，層級越高
如果父元素已經比較過層級了（父元素“都有”z-index的時候，并且值不為auto），那么子元素與子元素之間是不會再去比較的
到此，關于“CSS定位的使用方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
