絕對定位中的坑坑

一.基本概念:

如果說相對定位沒有脫離文件流，相對於物件本身進行偏移有點拖泥帶水的話，那麼絕對定位絕對是快刀斬亂麻，因為絕對定位可以使乙個物件脫離正常的文件流，好像是漂浮在正常文件流的上空,並相對於包含此物件的元素進行定位，當然這個定位相對元素在不同的情況下也有所不同。

二.如何將乙個元素設定為絕對定位:

為物件新增如下屬性即可將物件設定為絕對定位:

複製**

**如下:

position:absolute;

或者複製**

**如下:

position:fixed

三.定位參考物件:

可以使用top屬性和left屬性設定絕對定位物件的偏移量。

絕對定位雖然脫離了文件流，但是也需要有定位的參考物件，不過在不同的情況下參考物件也是不同。

1.如果沒有設定top或者left屬性值，那麼相應方位的定位參考物件就是此物件的一級父元素，**例項如下:

複製**

**如下:

以上**中，由於inner元素採用絕對定位，並且沒有設定left屬性值，所以在水平方位的定位參考物件就是inner元素的一級父元素children。當然如果沒有設定top屬性值，那麼垂直方位的定位參考物件也是children。

2.如果設定了left或者top屬性值情況:

1).如果祖先元素中有採用定位的，那麼此物件的相應方位的定位參考物件就是此祖先元素，如果祖先元素沒有採用定位的，那麼相應方位的上的定位參考物件就是瀏覽器客戶區，**例項如下:

例項一:

複製**

**如下:

以上**，inner元素採用絕對定位，並且它的祖先元素father採用相對定位，那麼它的定位參考物件就是father。

例項二:

複製**

**如下:

以上**中，inner元素採用絕對定位，並且它的祖先元素沒有採用定位的，那麼垂直方位的定位參考物件就是視窗，由於沒有設定left屬性值，那麼水平方位的定位參考物件就是它的一級父元素children。

四.絕對定位元素脫離文件流:

在開頭已經提到過，絕對定位能夠使元素脫離文件流，那麼它周邊文件流中的元素就能夠佔據此元素沒有脫離文件流時的位置。

**例項如下:

複製**

**如下:

first

second

在以上**中，由於first元素脫離文件流，所以second元素能夠佔據原來first元素本來應該佔據的位置。