html
咱們先來看一個效果，同時思考一下用標準流或浮動可否實現相似的效果？算法
場景1： 某個元素能夠自由的在一個盒子內移動位置，而且壓住其餘盒子.瀏覽器
場景2：當咱們滾動窗口的時候，盒子是固定屏幕某個位置的。佈局
結論：要實現以上效果，標準流 或 浮動都沒法快速實現學習
因此：網站
1.浮動可讓多個塊級盒子一行沒有縫隙排列顯示， 常常用於橫向排列盒子。ui
2.定位則是可讓盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置，而且能夠壓住其餘盒子。atom
定位：將盒子定在某一個位置，因此定位也是在擺放盒子， 按照定位的方式移動盒子url
定位也是用來佈局的，它有兩部分組成：spa
定位 = 定位模式 + 邊偏移
定位模式 用於指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。
邊偏移 就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。
| 邊偏移屬性 | 示例 | 描述 |
|---|---|---|
top |
top: 80px |
頂端偏移量，定義元素相對於其父元素上邊線的距離。 |
bottom |
bottom: 80px |
底部偏移量，定義元素相對於其父元素下邊線的距離。 |
left |
left: 80px |
左側偏移量，定義元素相對於其父元素左邊線的距離。 |
right |
right: 80px |
右側偏移量，定義元素相對於其父元素右邊線的距離 |
定位的盒子有了邊偏移纔有價值。 通常狀況下，凡有定位地方一定有邊偏移。
在 CSS 中，經過 position 屬性定義元素的定位模式，語法以下：
選擇器 {
position: 屬性值;
}
定位模式是有不一樣分類的，在不一樣狀況下，咱們用到不一樣的定位模式。
定位模式決定元素的定位方式 ，它經過 CSS 的 position 屬性來設置，其值能夠分爲四個：
| 值 | 語義 |
|---|---|
static |
靜態定位 |
relative |
相對定位 |
absolute |
絕對定位 |
fixed |
固定定位 |
靜態定位是元素的默認定位方式，無定位的意思。它至關於 border 裏面的none，靜態定位static，不要定位的時候用。
語法：
選擇器 {
position: static;
}
靜態定位 按照標準流特性擺放位置，它沒有邊偏移。
靜態定位在佈局時咱們幾乎不用的
相對定位是元素在移動位置的時候，是相對於它本身原來的位置來講的（自戀型）。
語法：
選擇器 {
position: relative;
}
相對定位的特色：（務必記住）
1.它是相對於本身原來的位置來移動的（移動位置的時候參照點是本身原來的位置）。
2.原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它。
所以，相對定位並無脫標。它最典型的應用是給絕對定位當爹的。。。
效果圖：
絕對定位是元素在移動位置的時候，是相對於它祖先元素來講的（拼爹型）。
語法：
選擇器 {
position: absolute;
}
徹底脫標 —— 徹底不佔位置；
父元素沒有定位，則以瀏覽器爲準定位（Document 文檔）。
父元素要有定位
元素將依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
絕對定位的特色總結：（務必記住）
1.若是沒有祖先元素或者祖先元素沒有定位，則以瀏覽器爲基準定位（Document 文檔）。
2.若是祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素爲參考點移動位置。
3.絕對定位再也不佔有原先的位置。因此絕對定位是脫離標準流的。（脫標）
弄清楚這個口訣，就明白了絕對定位和相對定位的使用場景。
這個「子絕父相」過重要了，是咱們學習定位的口訣，是定位中最經常使用的一種方式這句話的意思是：子級是絕對定位的話，父級要用相對定位。
由於絕對定位的盒子是拼爹的，因此要和父級搭配一塊兒來使用。
①子級絕對定位，不會佔有位置，能夠放到父盒子裏面的任何一個地方，不會影響其餘的兄弟盒子。
②父盒子須要加定位限制子盒子在父盒子內顯示。
③父盒子佈局時，須要佔有位置，所以父親只能是相對定位。
這就是子絕父相的由來，因此相對定位常常用來做爲絕對定位的父級。
總結： 由於父級須要佔有位置，所以是相對定位， 子盒子不須要佔有位置，則是絕對定位
固然，子絕父相不是永遠不變的，若是父元素不須要佔有位置，子絕父絕也會遇到。
疑問：爲何在佈局時，子級元素使用絕對定位時，父級元素就要用相對定位呢？
觀察下圖，思考一下在佈局時，左右兩個方向的箭頭圖片以及父級盒子的定位方式。
分析：
方向箭頭疊加在其餘圖片上方，應該使用絕對定位，由於絕對定位徹底脫標，徹底不佔位置。
父級盒子應該使用相對定位，由於相對定位不脫標，後續盒子仍然以標準流的方式對待它。
若是父級盒子也使用絕對定位，會徹底脫標，那麼下方的廣告盒子會上移，這顯然不是咱們想要的。
結論：父級要佔有位置，子級要任意擺放，這就是子絕父相的由來。
固定定位是元素固定於瀏覽器可視區的位置。（認死理型） 主要使用場景： 能夠在瀏覽器頁面滾動時元素的位置不會改變。
語法：
選擇器 {
position: fixed;
}
固定定位的特色：（務必記住）：
1.以瀏覽器的可視窗口爲參照點移動元素。
跟父元素沒有任何關係
不隨滾動條滾動。
2.固定定位不在佔有原先的位置。
固定定位也是脫標的，其實固定定位也能夠看作是一種特殊的絕對定位。（認死理型）
徹底脫標—— 徹底不佔位置；
只認瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設置元素的位置；
跟父元素沒有任何關係；單獨使用的
不隨滾動條滾動。
固定定位舉例：
提示：IE 6 等低版本瀏覽器不支持固定定位。
粘性定位能夠被認爲是相對定位和固定定位的混合。 Sticky 粘性的
語法：
選擇器 {
position: sticky;
top: 10px;
}
粘性定位的特色：
1.以瀏覽器的可視窗口爲參照點移動元素（固定定位特色）
2.粘性定位佔有原先的位置（相對定位特色）
3.必須添加 top 、left、right、bottom 其中一個纔有效
跟頁面滾動搭配使用。 兼容性較差，IE 不支持。
| 定位模式 | 是否脫標 | 移動位置 | 是否經常使用 |
|---|---|---|---|
| static 靜態定位 | 否 | 不能使用邊偏移 | 不多 |
| relative 相對定位 | 否 (佔有位置) | 相對於自身位置移動 | 基本單獨使用 |
| absolute絕對定位 | 是（不佔有位置） | 帶有定位的父級 | 要和定位父級元素搭配使用 |
| fixed 固定定位 | 是（不佔有位置） | 瀏覽器可視區 | 單獨使用，不須要父級 |
| sticky 粘性定位 | 否 (佔有位置) | 瀏覽器可視區 | 當前階段少 |
必定記住 相對定位、固定定位、絕對定位 兩個大的特色： 1. 是否佔有位置（脫標否） 2. 以誰爲基準點移動位置。
學習定位重點學會子絕父相。
注意：
邊偏移須要和定位模式聯合使用，單獨使用無效；
top 和 bottom 不要同時使用；
left 和 right 不要同時使用。
一個大的 li 中包含 一個課程圖片，課程介紹文字信息，還有hot的小圖標；
hot圖片重疊在課程圖片上面—— 脫標，不佔位置，須要使用絕對定位；
hot圖片重疊在li的右上方 —— 須要使用邊偏移肯定準確位置。
子絕父相 —— 子元素使用絕對定位，父元素使用相對定位；
與浮動的對比：
絕對定位：脫標，利用邊偏移指定準確位置；
浮動：脫標，不能指定準確位置，讓多個塊級元素在一行顯示。
課堂練習：模擬老師的隨堂案例完成哈根達斯案例（5 分鐘）。
結構修改：
<!-- 修改.box-bd裏面的li標籤內容，添加一個hot圖標 -->
<li>
<!-- 添加hot小圖片 -->
<em>
<img src="images/hot.png" alt="">
</em>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系統實戰項目演練
</h4>
<div class="info">
<span>高級</span> • 1125人在學習
</div>
</li>
樣式修改：
.box-bd ul li {
/* 子絕父相 */
/* 父元素相對定位 */
position: relative;
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
}
.box-bd ul li > img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd ul li em {
/* 子元素絕對定位 */
position: absolute;
top: 4px;
right: -4px;
}
小算法：
1.讓固定定位的盒子 left: 50%. 走到瀏覽器可視區（也能夠看作版心） 的一半位置。
2.讓固定定位的盒子 margin-left: 版心寬度的一半距離。 多走 版心寬度的一半位置
就可讓固定定位的盒子貼着版心右側對齊了。
案例效果：
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/* 1. 走瀏覽器寬度的一半 */
left: 50%;
/* 2. 利用margin 走版心盒子寬度的一半距離 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
在使用定位佈局時，可能會出現盒子重疊的狀況。此時，可使用 z-index 來控制盒子的先後次序 (z軸)
語法：
選擇器 {
z-index: 1;
}
z-index 的特性以下：
屬性值：正整數、負整數或 0，默認值是 0，數值越大，盒子越靠上；
若是屬性值相同，則按照書寫順序，後來居上；
數字後面不能加單位。
注意：z-index 只能應用於相對定位、絕對定位和固定定位的元素，其餘標準流、浮動和靜態定位無效。
應用 z-index 層疊等級屬性能夠調整盒子的堆疊順序。以下圖所示：
案例演示：堆疊順序。
注意：加了絕對定位/固定定位的盒子不能經過設置
margin: auto設置水平居中。可是能夠經過如下計算方法實現水平和垂直居中，能夠按照下圖的方法：
left: 50%;：讓盒子的左側移動到父級元素的水平中心位置；
margin-left: -100px;：讓盒子向左移動自身寬度的一半。
盒子居中定位示意圖
絕對定位和固定定位也和浮動相似。
1.行內元素添加絕對或者固定定位，能夠直接設置高度和寬度。
2.塊級元素添加絕對或者固定定位，若是不給寬度或者高度，默認大小是內容的大小。
前面咱們講過， display 是 顯示模式， 能夠改變顯示模式有如下方式:
能夠用inline-block 轉換爲行內塊
能夠用浮動 float 默認轉換爲行內塊（相似，並不徹底同樣，由於浮動是脫標的）
絕對定位和固定定位也和浮動相似， 默認轉換的特性 轉換爲行內塊。
因此說， 一個行內的盒子，若是加了浮動、固定定位和絕對定位，不用轉換，就能夠給這個盒子直接設置寬度和高度等。
浮動元素、絕對定位(固定定位）元素的都不會觸發外邊距合併的問題。 （咱們之前是用padding border overflow解決的）
也就是說，咱們給盒子改成了浮動或者定位，就不會有垂直外邊距合併的問題了。
浮動元素不一樣，只會壓住它下面標準流的盒子，可是不會壓住下面標準流盒子裏面的文字（圖片）
可是絕對定位（固定定位） 會壓住下面標準流全部的內容。
浮動之因此不會壓住文字，由於浮動產生的目的最初是爲了作文字環繞效果的。 文字會圍繞浮動元素
大盒子咱們類名爲： tb-promo 淘寶廣告
裏面先放一張圖片。
左右兩個按鈕 用連接就行了。 左箭頭 prev 右箭頭 next
左按鈕樣式（border-radius：左上，右上，右下，左下），
右按鈕定位，提取左右按鈕共同的樣式代碼（並集選擇器）
底側小圓點ul 繼續作。 類名爲 promo-nav
中間長方形橢圓 ul的定位（水平居中，離底部15px）
長方形須要五個小圓點，ul無序列表，li浮動，橢圓中小圓點的樣式
圓角矩形能夠爲4個角分別設置圓度， 可是是有順序的
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
若是4個角，數值相同
border-radius: 15px;
裏面數值不一樣，咱們也能夠按照簡寫的形式，具體格式以下:
border-radius: 左上角 右上角 右下角 左下角;
仍是遵循的順時針。