## 1.固定定位 - 將元素固定在頁面某個位置 ~~~ postion:fixed; top: left: right: bottom: ~~~ ## 2.相對定位 相對定位(position:relative)：讓元素相對于自己原來的位置，進行位置調整。 ps:相對定位的元素最好不要使用right，bottom。只用left和top; ~~~ position: relative; left: 50px;/*橫坐標：正值表示向右偏移，負值表示向左偏移*/ top: 50px; /*縱坐標：正值表示向下偏移，負值表示向上偏移*/ ~~~ <b>相對定位不脫標</b> **相對定位**：不脫標，老家留坑，**別人不會把它的位置擠走**。 也就是說，相對定位的真實位置還在老家，只不過影子出去了，可以到處飄。 ### 相對定位的用途 * （1）微調元素 * （2）做絕對定位的參考，子絕父相 ## 3.絕對定位 絕對定位（position:absolute）:定義橫縱坐標。原點在父容器的左上角或左下角。橫坐標用left表示，縱坐標用top或者bottom表示。**縱坐標若是top原點就在頁面的左上角；若是bottom原點就在頁面的左下角。** ### 絕對定位脫標 **絕對定位的盒子脫離了標準文檔流。** 所以，所有的標準文檔流的性質，絕對定位之后都不遵守了。 絕對定位之后，標簽就不區分所謂的行內元素、塊級元素了，不需要`display:block`就可以設置寬和高了。 ### 以盒子為參考點 一個絕對定位的元素，如果父輩元素中也出現了已定位（無論是絕對定位、相對定位，還是固定定位）的元素，那么將以父輩這個元素，為參考點。 **工程應用：** “**子絕父相**”有意義：這樣可以保證父親沒有脫標，兒子脫標在父親的范圍里面移動。于是，工程上經常這樣做： > 父親浮動，設置相對定位（零偏移），然后讓兒子絕對定位一定的距離。