一、定位
解決頁面上盒子與盒子之間的層疊問題
1、元素的定位屬性
邊偏移：通過邊偏移屬性top、bottom、left、right，來精確定義定位元素的位置
定位模式：position屬性定義元素的定位模式，position屬性常用值：static、relative、abselute、
1、相對定位relative
(1)position:relative;
(2)特點(diǎn)：a、相對自己原來的位置進(jìn)行位置調(diào)整。
b、設(shè)置相對定位后，它在文檔流中的位置仍然保留。
2、絕對定位（absolute）重點(diǎn)
它可以通過邊偏移移動位置，但是它完全脫標(biāo)，完全不占位置
如果文檔可以滾動，絕對定位會隨著它滾動
(1)父級沒有定位，孩子絕對定位，以瀏覽器可視區(qū)為準(zhǔn)對齊，
(2)父級有定位（相對、絕對和固定都可），孩子絕對定位，以父親為準(zhǔn)對齊
(3)絕對定位的盒子沒有邊偏移的情況：位置不變，不占位置，下面的盒子蓋在它的下面
《子絕父相》重點(diǎn)
子級是絕對定位，父親要用相對定位（父親用絕對定位的話，就脫離了標(biāo)準(zhǔn)流，會對下面的盒子產(chǎn)生影響）
小技巧：定位的盒子水平居中，首先是left：50%，走父盒子寬度的一般，然后子盒子margin-left 往左走自身盒子寬度的一半
小技巧：定位的盒子垂直居中，首先是top：50%，走父盒子寬度的一般，然后子盒子margin-top 往上走自身盒子寬度的一半
3、固定定位fixed
(1)固定定位是絕對定位的一個特殊形式，以瀏覽器窗口為參照物
(2)與父親是否定位無關(guān)，只認(rèn)瀏覽器
(3)固定定位完全脫標(biāo)，不占有位置，不隨著滾動條滾動
4、靜態(tài)定位（static）：
(1)經(jīng)常用來取消定位，以前浮動float：left；何如取消浮動float:none;現(xiàn)在position：relative；取消定位position：static；
(2)所有元素默認(rèn)定位方式，靜態(tài)定位沒有邊偏移，所以不能使用top、left等屬性
5、層級 z-index
(1)z-index的默認(rèn)值是0，取值越大，定位的元素在層疊元素中越居上
(2)取值相同，則根據(jù)書寫順序，后來居上
(3)只有相對定位、絕對定位、固定定位由此屬性
(4)數(shù)字后面不帶單位
6、定位模式的轉(zhuǎn)換
(1)如果元素添加了絕對定位和固定定位，想要通欄，則需添加width：100%；
(2)如果元素添加了絕對定位和固定定位，則顯示模式轉(zhuǎn)換為行內(nèi)塊模式(相對定位不是這樣的,浮動也可以，因?yàn)樗麄內(nèi)齻€都脫離標(biāo)準(zhǔn)流了)
7、四種定位總結(jié)
1、static：靜態(tài)定位、不脫標(biāo)、正常顯示模式、不能使用邊偏移
2、relative：相對定位、不脫標(biāo)、占有位置、可以使用邊偏移、相對自身位置移動
3、absolute：絕對定位、完全脫標(biāo)、不占位置、可以使用邊偏移、相對于定位父級移動位置
4、fixed：固定定位、完全脫標(biāo)、不占位置、可以使用邊偏移、相對于瀏覽器移動位置
二、精靈技術(shù)sprite
1、產(chǎn)生背景
有效的減少了服務(wù)器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度，減小服務(wù)器的壓力既并發(fā)
處理網(wǎng)頁背景圖像的能力方式
2、制作精靈圖
精靈圖都是小的裝飾圖，上不能放背景圖，要做插入圖片
精靈圖的寬度取決于最寬的那個背景圖
可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數(shù)像素合適
精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖
三、心得
1、網(wǎng)頁中提取精靈的位置和這個小盒子的絕對定位無關(guān)，寫法如下：
span {
width: 100px;
height: 105px;
background: url(images/abcd.jpg) no-repeat;
background-position: -123px -12px;
position: absolute;
top: -20px;
left: 100px;
}
2、如果子元素絕對定位但是父親不定位，則它相對瀏覽器參考定位，但是它隨著滾動條而滾動，固定定位則不同，固定定位也是相對瀏覽器窗口定位，但是它不隨著滾動條而滾動
