本篇博文，主要就講定位的問題，也就是頁面佈局里最重要的，本篇博文不出意外的話，也是css的最後一篇博文了 定位 定位有三種： 相對定位 絕對定位 固定定位 相對定位 相對定位的意思就是相對於自身元素原來的位置定位 ...
本篇博文，主要就講定位的問題，也就是頁面佈局里最重要的，本篇博文不出意外的話，也是css的最後一篇博文了
定位，position屬性
定位有三種：
- 相對定位
- 絕對定位
- 固定定位
相對定位，position：relative
相對定位的意思就是相對於自身元素原來的位置定位
設置相對定位之後，才可以使用四個方向的屬性： top、bottom、left、right
相對定位的特性：
不脫標
形影分離
依舊占原來的位
作用：
微調元素位置
做絕對定位的參考（父相子絕）絕對定位會說到此內容。
參考點：
自己原來的位置做參考點
絕對定位，position:abslute
絕對定位的意思就是以某謳歌參考點（往往是父級元素）作為定位基點進行設置
特性：
- 脫標
- 做遮蓋效果，提成了層級。
- 設置絕對定位之後，不區分行內元素和塊級元素，都能設置寬高
- 當設置top屬性時：絕對定位參考點是以頁面左上角（跟瀏覽器左上角區分）作參考進行調整
- 當設置bottom屬性時：絕對定位參考點是以首屏左下角作參考進行調整
參考點：
1.單獨一個絕對定位的盒子
- 當使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
- 當使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。
2.以父輩盒子作為參考點
- 父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。
- 如果父親設置了定位，那麼以父親為參考點。那麼如果父親沒有設置定位，那麼以父輩元素設置定位的為參考點
- 不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素為參考點
註意：
- 父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在我們頁面佈局中，是常用的佈局方案。因為父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
- 絕對定位的盒子無視父輩的padding
絕對定位的盒子居中：
設置絕對定位之後，margin:0 auto不起任何作用，如果想讓絕對定位的盒子居中：
設置子元素絕對定位，然後left:50%; margin-left：元素寬度的一半，實現絕對定位盒子居中（可以當做公式記下來）
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
position: relative;
left: 50%;
margin-left: -480px;
}
插一句，對文字內容的居中，例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
width:400px;
height:400px;
/*background-color:rgba(120, 217, 239, 0.64);*/
background: rgb(120, 217, 239);
opacity: 0.64;
}
p{
height: 20px;
background: red;
padding: 5px 0px;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<p>test</p>
</div>
</body>
</html>
效果：
對文字居中的公式：
p{
height: 20px;
background: red;
padding: 5px 0px;
line-height: 20px; /*垂直方向上的上下居中，其值和高度的值相同即可*/
text-align: center;/*水平方向的左右居中*/
}
固定定位，position:fixed
固定當前的元素不會隨著頁面滾動而滾動
特性:
- 脫標
- 遮蓋，提升層級
- 固定不變
參考點：
設置固定定位，用top描述。那麼是以瀏覽器的左上角為參考點，如果用bottom描述，那麼是以瀏覽器的左下角為參考點
作用：
- 返回頂部欄
- 固定導航欄
- 小廣告
例：
下麵這是淘寶頁面右邊的：其實就用了固定定位
父相子絕
指父元素設置相對定位，子元素設置絕對定位，這種是最長用的搭配。這個父元素不一定就是直系父元素，也可以是祖宗元素
父絕子絕
指父元素和子元素都設置絕對定位，此搭配沒有實際意義，說白了這個父元素沒有起什麼作用，還不如就直接一個元素設置絕對定位，開發中也基本不會這麼用
父固子絕
指父元素設置固定定位（設置固定定位的元素儘量是選擇父元素，防止因為元素有屬性margin和padding造成衝突），子元素設置絕對定位
以上三種搭配，都是以父元素作為參考點進行佈局
z-index
用來設置定位的層級優先順序，值為大於1的數字，值越大，優先順序越高
- z-index 值表示誰壓著誰，數值大的壓蓋住數值小的
- 只有設置定位的元素，設置z-index才有效果
- 浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數，預設的z-index值為0。
- 如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面壓著別人。
- 定位了元素，永遠壓住沒有定位的元素。
- 從父現象：在兩對父元素與子元素中，如果是其兩個子元素相比，如果父元素的z-index會覆蓋子元素的z-index值
好的，css樣式介紹完了，剩下的就是各位朋友自己下去練手了，怎麼練手呢，網上找一個網站，自己動手做一個一模一樣的出來，然後你基本掌握css了
後面就進入javascript了，朋友們，我們的路還很長，我更新web前端方面的知識是為了給Python高級課程的web框架做準備的，當然也是從零基礎開始介紹的web，如果朋友您只是想學web開發，一樣適用的
