### 1.固定定位 ``` position:fixed ``` ***** ### 2.相對定位 就是元素在頁面上正常的位置； 相對定位的元素最好不要使用`right,bottom` ``` position:relative; ``` ***** ### 3.絕對定位 1.它的位置是相對于最近的給了定位的父元素(包含爸爸的爸爸) 2.如果父元素沒有給定位,那么它的位置(left,top,right,bottom)是相對于整個窗口 ``` position:absolute; ``` > 父元素給`position:relative;` > 子元素給`position:absolute;` > 再通過`left,right,top,bottom`調位置 ### 4.position與margin同時使用時的問題 情況一：父元素及其祖先給了`position:relative`，`child`再使用`margin`會直接改變父元素的`margin`；如果想改變`child`的位置就用`position:absolute;` ``` <style> .grandparent{ position:relative; } .parent{ position:relative; ... } .child{ margin-top:xxx; } </style> <div class="grandparent"> <div class="parent"> <div class="child"> ... </div> </div> </div> ``` 情況二：祖先給了`position:relative:`，父元素給了`position:absolute`，`child`設置`margin:xxx`對父元素無影響，此時可以使用`margin`來改變child的位置 ``` <style> .grandparent{ position:relative; } .parent{ position:absolute; ... } .child{ margin-top:xxx; } </style> <div class="grandparent"> <div class="parent"> <div class="child"> ... </div> </div> </div> ```