定位與錨點

• 文檔流：

普通流：上至下，左至右
浮動流：元素添加了float：；
定位流：添加了定位屬性

• 定位 position:;

static 默認值
absolute 絕對定位(脫離文檔流，不佔位；默認參考瀏覽器零點)
relative 相對定位（佔據文檔流，佔位置；參考自身加載在頁面中的位置）
fixed 固定（脫離文檔流，不佔位；元素固定在頁面中，不隨頁面滾動而滾動；默認參考瀏覽器零點）
sticky 粘性定位（頁面達到必定高度時，脫離文檔流；效果是吸附瀏覽器頂部）（結合了relative和fixed的特徵）

座標位置 水平 left right
垂直 top bottom

• 包含塊：

造成嵌套結構，且父級元素有設置定位position：relative；

 

• absolut和relative的區別：

一、是否佔據文檔流， absolute佔據，relative不佔據
二、參考物不一樣，absolute參考html，relative參考自身

• 層級關係 z-index:;

前提條件：有定位的元素才能設置層級關係
auto 默認值0
number 具體數字，能夠爲負數
並列關係：改變任一元素的層級關係均可以
嵌套關係：只能改變子集的層級關係

• 元素居中方式

第一種：

position:absolute; ==>子元素改變子集位置
top:0p;
right:0px;
bottom:0px;
left:0px;
margin:auto; ==>自適應

第二種：

position:absolute; ==>子集做爲被參考物
top:50%;
left:50%;
margin-left:寬度值一半的px;
margin-top:高度值一半的px;

• 錨點連接

一、點擊位置 <a href=#name"">點擊位置</a>
二、肯定跳轉位置 <標籤 id="name">指定跳轉的位置</標籤>
三、頁面高度足夠