一肯骇、定位
解決頁(yè)面上盒子與盒子之間的層疊問題
1、元素的定位屬性
邊偏移：通過邊偏移屬性top镊逝、bottom、left嫉鲸、right撑蒜，來(lái)精確定義定位元素的位置
定位模式：position屬性定義元素的定位模式，position屬性常用值：static充坑、relative减江、abselute、
1捻爷、相對(duì)定位relative
(1)position:relative;
(2)特點(diǎn)：a辈灼、相對(duì)自己原來(lái)的位置進(jìn)行位置調(diào)整。
b也榄、設(shè)置相對(duì)定位后巡莹，它在文檔流中的位置仍然保留。
2甜紫、絕對(duì)定位（absolute）重點(diǎn)
它可以通過邊偏移移動(dòng)位置降宅，但是它完全脫標(biāo)，完全不占位置
如果文檔可以滾動(dòng)囚霸，絕對(duì)定位會(huì)隨著它滾動(dòng)
(1)父級(jí)沒有定位腰根，孩子絕對(duì)定位，以瀏覽器可視區(qū)為準(zhǔn)對(duì)齊拓型，
(2)父級(jí)有定位（相對(duì)额嘿、絕對(duì)和固定都可）瘸恼，孩子絕對(duì)定位，以父親為準(zhǔn)對(duì)齊
(3)絕對(duì)定位的盒子沒有邊偏移的情況：位置不變册养，不占位置东帅，下面的盒子蓋在它的下面
《子絕父相》重點(diǎn)
子級(jí)是絕對(duì)定位，父親要用相對(duì)定位（父親用絕對(duì)定位的話球拦，就脫離了標(biāo)準(zhǔn)流靠闭，會(huì)對(duì)下面的盒子產(chǎn)生影響）
小技巧：定位的盒子水平居中，首先是left：50%坎炼，走父盒子寬度的一般愧膀，然后子盒子margin-left 往左走自身盒子寬度的一半
小技巧：定位的盒子垂直居中，首先是top：50%点弯，走父盒子寬度的一般扇调，然后子盒子margin-top 往上走自身盒子寬度的一半
3、固定定位fixed
(1)固定定位是絕對(duì)定位的一個(gè)特殊形式抢肛，以瀏覽器窗口為參照物
(2)與父親是否定位無(wú)關(guān)，只認(rèn)瀏覽器
(3)固定定位完全脫標(biāo)碳柱，不占有位置捡絮，不隨著滾動(dòng)條滾動(dòng)
4、靜態(tài)定位（static）：
(1)經(jīng)常用來(lái)取消定位莲镣，以前浮動(dòng)float：left福稳；何如取消浮動(dòng)float:none;現(xiàn)在position：relative；取消定位position：static瑞侮；
(2)所有元素默認(rèn)定位方式的圆，靜態(tài)定位沒有邊偏移，所以不能使用top半火、left等屬性
5越妈、層級(jí) z-index
(1)z-index的默認(rèn)值是0，取值越大钮糖，定位的元素在層疊元素中越居上
(2)取值相同梅掠，則根據(jù)書寫順序，后來(lái)居上
(3)只有相對(duì)定位店归、絕對(duì)定位阎抒、固定定位由此屬性
(4)數(shù)字后面不帶單位
6、定位模式的轉(zhuǎn)換
(1)如果元素添加了絕對(duì)定位和固定定位消痛，想要通欄且叁，則需添加width：100%；
(2)如果元素添加了絕對(duì)定位和固定定位秩伞，則顯示模式轉(zhuǎn)換為行內(nèi)塊模式(相對(duì)定位不是這樣的,浮動(dòng)也可以逞带，因?yàn)樗麄內(nèi)齻€(gè)都脫離標(biāo)準(zhǔn)流了)
7欺矫、四種定位總結(jié)
1、static：靜態(tài)定位掰担、不脫標(biāo)汇陆、正常顯示模式、不能使用邊偏移
2带饱、relative：相對(duì)定位毡代、不脫標(biāo)、占有位置勺疼、可以使用邊偏移教寂、相對(duì)自身位置移動(dòng)
3、absolute：絕對(duì)定位执庐、完全脫標(biāo)酪耕、不占位置、可以使用邊偏移轨淌、相對(duì)于定位父級(jí)移動(dòng)位置
4迂烁、fixed：固定定位、完全脫標(biāo)递鹉、不占位置盟步、可以使用邊偏移、相對(duì)于瀏覽器移動(dòng)位置
二躏结、精靈技術(shù)sprite
1却盘、產(chǎn)生背景
有效的減少了服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度媳拴，減小服務(wù)器的壓力既并發(fā)
處理網(wǎng)頁(yè)背景圖像的能力方式
2黄橘、制作精靈圖
精靈圖都是小的裝飾圖，上不能放背景圖屈溉，要做插入圖片
精靈圖的寬度取決于最寬的那個(gè)背景圖
可以橫向擺放也可以縱向擺放塞关，但是每個(gè)圖片之間，間隔至少隔開偶數(shù)像素合適
精靈圖的最低端语婴，留一片空隙描孟，方便我們以后添加其他精靈圖
三、心得
1砰左、網(wǎng)頁(yè)中提取精靈的位置和這個(gè)小盒子的絕對(duì)定位無(wú)關(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、如果子元素絕對(duì)定位但是父親不定位缠导，則它相對(duì)瀏覽器參考定位廉羔，但是它隨著滾動(dòng)條而滾動(dòng)，固定定位則不同僻造，固定定位也是相對(duì)瀏覽器窗口定位憋他，但是它不隨著滾動(dòng)條而滾動(dòng)
