### 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> ```