絕對定位:

　　設置為絕對定位的元素會脫離文檔流，并相對于其最近的已定位的祖先元素定位，并且元素定位以后會變成一個塊級框，例如：

<style>i{width:100px;height: 100px;background: red;margin: 300px auto;} </style> <i>HIHA</i>

i標簽本來是行內元素，這段代碼的運行結果：

其寬高完全由其內的文字‘HIHA’撐起來的，跟咱們定義的樣式，width、height無關，并且margin在豎直方向上無效（應為i是行內元素），但是將上面代碼改成：

<style>i{position: absolute;width:100px;height: 100px;background: red;margin: 300px auto;} </style> <i>HIHA</i>

運行結果就變為了：

Margin和width、height都起了作用，說明其已經變為了塊級元素。

另外，因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素，可以通過z-index屬性來控制這些框的堆放次序。

?

相對定位：

如果對一個元素進行相對定位，它將出現在它所在的位置上，換句話說，原來是哪兒，還是哪兒，可以通過設置垂直或水平位置，讓這個元素相對于它自己的起點進行移動，其本身還在文檔普通流，例如，上例改為：

<style>i{position: relative;width:100px;height: 100px;background: red;margin: 300px auto;} </style> <i>HIHA</i>

運行結果為：

說明這時的i標簽還是普通的行內元素，并未發生本質的改變。

?

?

另附：行內元素與塊級元素的區別：

1、? 塊級元素獨占一行，且其寬度默認情況下會占滿其父元素的寬度，行內元素不會獨占一行，其相鄰元素可以排在一行

2、? 塊級元素可以設置width，height，行內元素設置width、height無效，而且塊級元素即使設置寬度也還是獨占一行。

3、? 塊級元素可以設置margin和padding屬性，行內元素水平方向的margin和padding如margin-left、padding-right可以產生邊距效果，但是豎直方向的如，margin-top/bottom，padding-top/bottom，不會產生邊距效果。

4、? 塊級元素和行內元素的相關屬性：display，

其中塊級元素對應display：block,行內元素對應display：inline。

補充說明：display：inline-block，可以讓元素具有塊級元素和行內元素的特性，既可以設置長寬，可以讓padding和margin生效，有可以和其他行內元素并排，是一個很實用的屬性。

?

行內元素變為塊級元素的方法：

???????? 1、Display：block；2、浮動行內元素；3，絕對定位行內元素；

?

轉載于:https://www.cnblogs.com/web-fusheng/p/6711079.html

總結

以上是生活随笔為你收集整理的相对定位与绝对定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。