絕對定位:

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

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

i標簽本來是行內(nèi)元素，這段代碼的運行結(jié)果：

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

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

運行結(jié)果就變?yōu)榱?#xff1a;

Margin和width、height都起了作用，說明其已經(jīng)變?yōu)榱藟K級元素。

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

?

相對定位：

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

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

運行結(jié)果為：

說明這時的i標簽還是普通的行內(nèi)元素，并未發(fā)生本質(zhì)的改變。

?

?

另附：行內(nèi)元素與塊級元素的區(qū)別：

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

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

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

4、? 塊級元素和行內(nèi)元素的相關(guān)屬性：display，

其中塊級元素對應(yīng)display：block,行內(nèi)元素對應(yīng)display：inline。

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

?

行內(nèi)元素變?yōu)閴K級元素的方法：

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/web-fusheng/p/6711079.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。