先上結論：
子元素沒有設定定位，其尺寸設定百分比參照的物件是 該子元素的父級元素；
子元素絕對定位後，其尺寸設定為百分比參考的物件是 該子元素設定了定位（這裡的定位包括絕對定位，相對定位和固定定位）的祖先元素（一層一層往上找，直到找到定位的祖先元素停止）。若沒有找到目標，則參照的是瀏覽器視窗。
下面是測試**
子元素不設定定位，父元素也不設定定位
"en效果如下：">class="
father
">
class="
son">
class="
grandson
">
可以看到子元素尺寸參照的是父級元素。
在上面**的基礎上，給黃色盒子設定定位：
"en效果如下：">class="
father
">
class="
son">
class="
grandson
">
看到和上面結果一樣，說明子元素沒有設定定位，不會理睬設定了定位的祖先元素。
接著在上面的基礎上，給粉色的盒子設定絕對定位：
"en效果如圖：">class="
father
">
class="
son">
class="
grandson
">
看到，子元素（粉色盒子）的寬度和設定了定位的祖先元素（黃色盒子）的寬度一樣。
接著，將祖先元素的定位去掉。**如下：
"en效果如下：">class="
father
">
class="
son">
class="
grandson
">
子元素（粉色盒子）的寬度為瀏覽器的寬度（因為其祖先元素沒有定位）。
上述結論成立。
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...
css定位中的百分比
在前端css定位中經常面對的乙個問題是，百分比定位究竟是針對於誰定位？一 margin，padding的百分比 首先從css的設計意圖說起，在瀏覽器預設的writing mode horizontal tb 和direction ltr 的情況下，因為css的基礎需求是排版，而通常我們所見的橫排文字...
CSS百分比布局
曾經的 布局可能大家都有點陌生了吧，其實我也是基本上沒用過，自從web2.0的興起，重構的思想，這讓 布局就這樣消失了基本上，布局中有用到百分比布局的，在 布局 落下帷幕之後，基本上我們都是讓網頁固定為950 1000px，如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...