一、 css 有三種基本的定位機制：普通流、浮動流、定位流。
1、普通：上下排列的布局（注：大部分情況）
2、浮動：左右排列的布局（注：大部分情況）
3、定位：層疊（疊加）排列的布局 （注：大部分情況）
定位屬性：position ：檢索或設定物件的定位方式。
1、static：預設值；沒有定位； （可以用於取消元素之前的定位設定）
2、relative：相對定位 （參照物：自己所在的位置）
特點： 如果沒有定位偏移量，對元素本身沒有任何影響
不使元素脫離文件流，空間是會被保留。
不影響其他元素布局
left、top、right、bottom是相對於當前元素自身進行偏移的 ，不能獨自存在，必須配合定位元素一起使用 。
3、 absolute : 絕對定位 （參照物：包含塊—該元素的祖先級元素）
使元素完全脫離文件流
使內聯元素支援寬高 （讓內聯具備塊特性）
使塊元素預設寬根據內容決定（讓塊具備內聯的特性）
如果有定位祖先元素相對於定位祖先元素發生偏移，沒有定位祖先元素相對於整個文件發生偏移（絕對、相對、固定）
注：如果祖先元素中有多個元素具備定位模式，那麼是已離自己最近的祖先元素進行偏移。預設情況下是相對可視視窗進行定位的。
包含塊的概念：
包含塊絕對定位的基礎；
絕對定位元素會根據包含塊進行絕對定位，預設情況下
，瀏覽器的可視視窗是乙個大的包含塊，預設情況下，絕對定位元素會相對瀏覽器的可視視窗進行定位；如果他的祖先級元素定義了包含塊，那他就最近的祖先級元素進行絕對定位。
怎麼給他的祖先級元素定義成包含塊： 給祖先級元素新增position：relative/absolute/fixed。
絕對定位和相對定位的區別：
1、相對定位的參照物是自己本身所在的位置，絕對定位的參照物的是包含塊
2、相對定位是不會脫離文件流的，而且不會對頁面的布局產生影響；絕對定位是會脫離文件流的，原來的位置就不在占有的，後面的內容會把位置補上去。
z-index
auto |number
檢索或設定物件的層疊順序。
auto：預設值。
number:無單位的整數值。可為負數
沒有設定z-index時，最後寫的物件優先顯示在上層，設定後，數值越大，層越靠上；
注：他只針對於具有定位屬性的元素起作用；
4、固定定位： fixed （參照物：始終都是 相對於整個瀏覽器視窗進行固定定位的）
使元素完全脫離文件流
使內聯元素支援寬高 （讓內聯具備內聯塊特性）
使塊元素預設寬根據內容決定（讓塊具備內聯塊的特性）
相對於整個瀏覽器視窗進行偏移，不受瀏覽器滾動條的影響不會受到祖先元素的影響。
5、 黏性定位: sticky
在沒有到達指定位置的時候，是沒有定位效果的，到達了指定位置，就變成了固定模式。
CSS定位屬性
position 把元素放置到乙個靜態的 相對的 絕對的 或固定的位置中。top定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。left 定義了定位元素左...
CSS 定位屬性
使用定位屬性可以控制元素的位置，包括相對定位和絕對定位兩種方式。相對定位是指允許元素在相對於文件布局的原始位置上進行偏移，而絕對定位是指允許元素與原始的文件布局分離且任意定位。1.1定位方式 position 使用定位方式屬性可以控制瀏覽器應如何定位html 元素。語法 position stati...
定位屬性CSS
第1個盒子 第2個盒子 第3個盒子 鏈結1鏈結2 鏈結3鏈結4 鏈結5 position屬性 static 預設值，沒有定位！relative 相對定位！相對於自身原來的位置！也就是現在的位置，按照定位能還原到原本的位置！設定相對定位的盒子，原本的位置會被留下來！absolute 絕對定位 相對於離...