1.背景介紹
2.知識剖析
position屬性
1.static? 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中。
2.relative
生成相對定位的元素，相對于其正常位置進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
3.absolute
生成絕對定位的元素，相對于離該元素最近的父元素進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
fixed
固定定位，相對于瀏覽器窗口進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
瀏覽器支持：所有主流瀏覽器都支持 position 屬性。
注意：在寫定位的時候，left、top、right、bottom使用一個或兩個就可以了，不要寫三個或四個。
3.常見問題
4.解決方案
5.編碼實戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
w3school在線教程
菜鳥教程
8.更多討論
1.定位在什么情況下使用，應(yīng)用場景是什么？ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?答：經(jīng)常在布局的時候使用，通過定位改變元素的位置。
2.position如何實現(xiàn)垂直居中？
答：（1）.不知道自己高度和父容器高度的情況：
parentElement {
position:relative;
}
childElement {
position:absolute;
top:50%;
transform:translateY(-50%);
}
（2）.若父容器下只有一個元素，且父元素設(shè)置了高度，則只需要使用相對定位即可
parentElement {
height:xxx;
}
.childElement {
position:relative;
top:50%;
transform:translateY(-50%);
}
（3）使用絕對定位要注意什么？
答：注意離該元素最近的父元素。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 通常，使用absolute時，離該元素最近的父元素要加上position：relative；如果不寫，該元素會默認(rèn)一個父元素進(jìn)行定位。
