大家好铭拧，我是IT修真院鄭州分院第五期學(xué)員王姝麗，一枚正直善良的web程序員恃锉。
今天和大家分享一下搀菩，修真院官網(wǎng)css3任務(wù)中，position定位破托。
1.背景介紹
CSS中一共有三種基本定位機(jī)制：普通流肪跋、浮動(dòng)、絕對(duì)定位土砂。 如果不進(jìn)行專(zhuān)門(mén)指定州既，所有的標(biāo)簽都在普通流中定位。 塊級(jí)元素從上到下一個(gè)接一個(gè)的排列萝映，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)吴叶。 行內(nèi)框在一行中水平布置⌒虮郏可以使用水平內(nèi)邊距蚌卤、邊框和外邊距來(lái)調(diào)整它們之間的間距。
CSS定位方式有四種：默認(rèn)定位（static）奥秆、相對(duì)定位（relative）逊彭、絕對(duì)定位（absolute）和固定定位（fixed）
2.知識(shí)剖析
static是position屬性的默認(rèn)值，無(wú)特殊定位构订。然后既然是默認(rèn)值侮叮，是不是就沒(méi)有用了，其實(shí)static也是很有用的悼瘾，當(dāng)兩個(gè)頁(yè)面同時(shí)需要用到同一個(gè)樣式時(shí)签赃，一個(gè)需要定位谷异，另一個(gè)不需要時(shí)，就可以用到position：static锦聊；
position: relative; 相對(duì)定位。 相對(duì)于自己原本的位置進(jìn)行定位箩绍。 在文檔流中孔庭，元素偏移前的位置保留。 一般用于給absolute元素一個(gè)定位參照物材蛛。 該元素偏移之后圆到，可能存在覆蓋其他元素的情況，可以使用z-index屬性卑吭。
position: absolute; 絕對(duì)定位芽淡。 相對(duì)于第一個(gè)設(shè)置了定位屬性除了static定位以外的祖先元素進(jìn)行定位，如果當(dāng)前父元素沒(méi)有定位屬性豆赏，那么就會(huì)一直向上尋找挣菲，如果都沒(méi)有，那么會(huì)相對(duì)于html元素定位掷邦。 脫離文檔流白胀。
position: fixed; 固定定位 相對(duì)于瀏覽器窗口進(jìn)行定位，當(dāng)滾動(dòng)頁(yè)面時(shí)抚岗，具有position:fixed;屬性的元素不會(huì)隨滾動(dòng)條滾動(dòng)或杠。 脫離文檔流。 一般用于頁(yè)面的廣告宣蔚，固定頂欄等向抢。
3.常見(jiàn)問(wèn)題
（1）如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
（2）什么是z-index？
4.解決方案
（1）可以配合使用margin: 塊級(jí)元素寬高的一半的負(fù)值; 實(shí)現(xiàn)塊級(jí)元素的垂直居中。
（2）如果這個(gè)頁(yè)面是二維的，那z-index就處于三維中缭嫡，如圖所示：
z-index 這個(gè)屬性控制著元素在z軸上的表現(xiàn)形式斜友。
堆疊順序是當(dāng)前元素位于z軸上的值。數(shù)值越大表明元素的堆疊順序越高洽瞬，越靠近屏幕。離我們眼睛所看到的越近。
就像這樣的
5.擴(kuò)展思考
fixed屬性一般都用來(lái)做什么枢冤？
6.參考文獻(xiàn)
參考一：靜如秋月的博客
參考二：Pet的博客
6.更多討論
浮動(dòng)和對(duì)其他元素的影響
感謝大家觀看！
今天的分享就到這里啦铜秆，歡迎大家點(diǎn)贊淹真、轉(zhuǎn)發(fā)、留言连茧、拍磚~
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師核蘸，現(xiàn)在開(kāi)始巍糯，找個(gè)師兄，帶你入門(mén)客扎，掌控自己學(xué)習(xí)的節(jié)奏祟峦，學(xué)習(xí)的路上不再迷茫”徙鱼。
這里是技能樹(shù).IT修真院宅楞，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化袱吆，成長(zhǎng)可見(jiàn)化厌衙，師兄1對(duì)1免費(fèi)指導(dǎo)〗嗜蓿快來(lái)與我一起學(xué)習(xí)吧 婶希！
我的學(xué)習(xí)邀請(qǐng)碼：12164783? ? 或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/12164783
