本文章所有權(quán)歸饑人谷_Lyndon和饑人谷所有
1. 有幾種定位方式有缆，分別是如何實現(xiàn)定位的折剃，參考點是什么华临，使用場景是什么是鬼？
- position: relative 相對定位：相對于元素的正常位置進行定位僧须；參考點為元素原來的位置纲刀；在使用相對定位時，無論是否進行移動担平，元素在文檔流中仍然占據(jù)原來的空間示绊，只是表現(xiàn)出來的位置會改變；
- position: absolute 絕對定位暂论，相對于static（默認(rèn)值面褐，沒有定位）以外的第一個父元素進行定位；參考點為第一個父元素取胎；根據(jù)定位點的padding進行偏移展哭；不占據(jù)文檔空間，普通流中的元素布局就像絕對定位元素不存在闻蛀；
- position: fixed 固定定位匪傍，相對于瀏覽器窗口進行定位；參考點為瀏覽器窗口觉痛；固定定位的元素也不包含在文檔流中役衡；
- position: sticky CSS3新屬性，表現(xiàn)類似relative和fixed的集合體薪棒，目標(biāo)區(qū)域在屏幕可見時手蝎，它的行為像position: relative榕莺，當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的行為像position: fixed柑船。
- 因為不熟練帽撑，所以對每一種定位方式做出實踐：
- 普通流
定位-1.png
- 相對定位
定位-2.png
- 絕對定位
- 固定定位
定位-4.png
2. z-index 有什么作用? 如何使用?
絕對定位（absolute）與文檔流無關(guān)，所以絕對定位的元素可以覆蓋頁面上其他的元素鞍时，通過z-index屬性控制疊放順序亏拉，z-index越高，元素的位置越靠上逆巍。
定位-5.png
3. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移及塘，二者有什么區(qū)別？
position:relative在元素偏移時不影響其他元素锐极，因為其文檔流的位置未發(fā)生任何改變笙僚；但是負(fù)margin影響其他元素，使得與其相近的元素也會發(fā)生偏移灵再。
定位-6.png
定位-7.png
4. 如何讓一個固定寬高的元素在頁面上垂直水平居中?
方法：使用絕對定位肋层，分別向右、向下移動相對高翎迁、寬50%的距離栋猖，此時圖形的起點位于頁面中心，需要再將其向左汪榔、向上移動一半的width和一半的height蒲拉，一般采用負(fù)margin的方法。
定位-8.png
