相對定位position:relative · css3

定位就是將盒子模型按指定位置加載相對定位，不脫離標準流，絕對定位和固定，定位是脫離標準流的。 ``` position:relative; ``` 作用：設置盒子針對某個參考元素進行位置偏移設置屬性值： relative: 相對定位 absolute: 絕對定位 fixed: 固定定位如果定位的元素想要發生位置偏移，必須搭配偏移量屬性進行設置水平方向設置： left, right //從外往內走垂直方向：top bottom //從外往內走 1.相對定位屬性值：relative 相對的意思語法： ``` position :relative ； left:像素值； right : 像素值； top: 像素值； bottom: 像素值； ``` 相對定位的性質：是不脫標準狀態的，不會讓出原始位置，盒子會在新的指定位置加載。 ### 需要注意的是：偏移量屬性是有正負之分的正數：表示偏移和屬性名正好相反負數：表示偏移方向和屬性名正好相同 <br/><br/> <h3>注意：在水平方向不能同時設置left和right屬性，如果同時設置，只會加載left屬性，垂直方向如果top和bottom同時設置，只會加載top屬性。 </h3> <br/><br/> 參考元素：自身盒子的原始位置參考代碼： ``` <style> *{ margin: 0; padding: 0; } p{ width:100px; height:100px; background-color:cyan; margin:5px; } p.current{ background-color: darkgreen; position: relative; left:100px; top:100px; } </style> <title>Document</title> </head> <body> <p></p> <p class="current"></p> <p></p> </body> ``` 效果： ![](https://img.kancloud.cn/2a/15/2a1514317acacef38fce15e585cee14d_1071x774.png) 上圖中： <p style="color:red">綠色盒子是相對定位的，元素是沒有脫離標準流的，移動之前的位置還保留并沒有被后面元素擠上去此時盒子的顯示效果，以自身為基準向右向下分別偏移了100PX </p> position:?relative; left:100px; top:100px; ## ## 位置為負數代碼： ``` *{ margin: 0; padding: 0; } div{ width:300px; margin:100px auto; } p{ width:100px; height:100px; background-color:cyan; margin:5px; } p.current{ background-color: darkgreen; position: relative; left: -50px; top:-50px; } </style> <title>Document</title> </head> <body> <div> <p></p> <p class="current"></p> <p></p> </div> </body> ``` 效果圖： ![](https://img.kancloud.cn/ad/98/ad983853a2ad14b3ec76fa52e96a0459_819x721.png) 效果部分： position:?relative; left:-50px; top:-50px; <br/><br/> ## 示例：綠色元素塊各偏移100px; left組合top:使用的是偏移之前的左上頂點作為參考點。 ![](https://img.kancloud.cn/e1/8f/e18f743bc1849ffd619c7b80fcc79083_707x675.png) left組合bottom:使用偏移前的左下頂點作為參考點。 ![](https://img.kancloud.cn/33/27/33277f4da25a06cddaa6f77d2cbdd683_581x649.png) fight組合top:使用偏移前的右上頂點作為參考點。 ![](https://img.kancloud.cn/38/e6/38e6574a4c31f7b430f1af846e0bafdd_627x673.png) fight組合bottom:使用偏移前的右下頂點作為參考點。 ![](https://img.kancloud.cn/39/bf/39bfed6aaa77ee91fbbd2d403a2952bb_524x601.png) <p>