----轉載自自己在牛人部落中的相關文章---
在前端css定位中經常面對的一個問題是，百分比定位究竟是針對於誰定位？
一、margin，padding的百分比
首先從css的設計意圖說起，在瀏覽器默認的 writing-mode: horizontal-tb; 和 direction: ltr; 的情況下，因為CSS的基礎需求是排版，而通常我們所見的橫排文字，其水平寬度一定（仔細回想一下，如果沒有顯式的定義寬度或者強制一行顯示，都會遇到邊界換行，而不是水平延展），垂直方向可以無限延展。這也是為什么：
1. margin: auto; 無法在縱向上垂直居中，其實原因也是上面所說的，因為縱向是可以無限延展的，所以沒有一個一定的值可以被參照被用來計算。
2.margin(包括margin-top,margin-bottom,margin-left,margin-right)：使用百分比時都是相對於父元素的寬度定位；
3.padding(包括padding-top,padding-left,padding-bottom,padding-right):使用百分比時也都是相對於父元素的寬度定位。
具體可參考這篇文章：
http://www.ituring.com.cn/article/64581
二、歸納如下：
相對於父元素寬度的，（如果自身已經是最外層元素，則相對於視口）
[max/min-]width、left、right、padding（包括padding-top,padding-bottom）、margin(包括margin-top,margin-bottom) 等；
相對於父元素高度的：（如果自身已經是最外層元素，則相對於視口）
[max/min-]height、top、bottom 等；
其中，關於height百分比定位的一個冷知識是：若某元素的父元素沒有確定高度，則無法有效使用height=XX%的樣式。除非該元素已經是最外層元素，此時是相對於視口。
詳情可參見：http://www.cnblogs.com/vajoy/p/3730014.html
相對於繼承字號的：
font-size 等；
相對於自身字號的：
line-height 等；
相對於自身寬高的：
border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
特殊算法的：
background-position（方向長度 / 該方向除背景圖之外部分總長度 * 100）、
filter 系列函數等；
如果 position: fixed，“父元素”指視口。