本文章所有權(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
