CSS 相對定位和相對定位的區別

css佈局中的position:static|absolute|fixed|relative 的4中屬性

從上面語法可以看出，定位的方法有很多種，它們分別是靜態(static)，絕對定位(absolute)，固定(fixed)，相對定位(relative)。在這個教程裏，我不逐一講，只講最常用也是最實用的兩個定位方法：絕對定位(absolute)、相對定位(relative)。

絕對定位(absolute)：將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，即還是遵循HTML定位規則的，則依據body對象左上角作為參考進行定位。絕對定位對象可層疊，層疊順序可通過z-index屬性控制，z-index值為無單位的整數，大的在最上面，可以有負值(目前負值FF不支持)。

相對定位(relative)：對象不可層疊，依據left，right，top，bottom等屬性在正常文檔流中偏移自身位置。同樣可以用z-index分層設計。

我剛開始寫樣式的時候，很容易在position:absolute出現錯位了，糾結了1年之後，基本上寫的樣式兼容ie各個版本，火狐瀏覽器，谷歌瀏覽器，360瀏覽器等主流瀏覽器。

position:static是默認的屬性。

absolute：儘量不要使用left:px。。right:px等屬性。儘量使用margin-left:多少px;這樣不容易錯位。

fixed：是固定死的。無論你瀏覽器上下如何滾動，距離瀏覽器器的具體都不會改變的。

relative：相對定位。

以下是demo1:

層級關係為：

為改變參照物（橘色框）後的效果層級關係為：

參照物為最頂級的元素情況。層級關係為：