元素寬高以百分比設定時的大小相對誰來確定
今天在做一個demo的時候有一個地方遇到一個問題，想實現小星星bling bling的效果，在我設定background-size由100%變為50%的時候，發現小星星變成了巨星！！震驚！！！
因為我的小星星是以背景圖片放在一個div (class=”inner”)裡，然後巢狀在另外一個div (class=”outer”)裡，我給.outer設定了寬和高，然後我想小星星的background-size以百分比設定的時候其大小是以.outer來確定的，檢視W3C的標準也是以父元素的百分比來設定背景影象的寬度和高度。。。可是我的怎麼就不行呢？？
原因就是基於demo需要我給我的.inner設定了絕對定位，position:absolute;但是.outer是沒有定位的，所以導致我的小星星不是以.outer來確定大小的。
這讓我想到了我以前學習的，當元素設定為絕對定位時，該元素是以“最近的已定位的祖先元素的padding起點”為原點進行定位的，如果都沒定位則以body定位。所以我猜大小也是這樣確定的。下面來試試吧~
body部分：
<body>
<div class="outer">
<div class="inner">
<p></p>
</div>
</div>
</body>情況一：大家都是預設定位
css部分：
<style 分析：此時大家都沒有設定定位，所以p元素的寬和高是以直接父元素即.inner來確定大小的。
結果：
情況二：就最裡面的p元素設定position為absolute或fixed，此時p的大小是相對body確定，因為兩個父元素都沒有設定定位。當設定position為relative時與情況一的結果一樣。
css部分（只有p元素的樣式改變）：
p{
position: absolute;/*絕對定位*/
width: 50%;
height: 50%;
border: 1px solid;
}結果：
情況三：直接父元素沒有設定定位，.outer設定了定位（relative, absolute或fixed），此時p元素的大小是以.outer來確定的。
css部分（p元素和.outer的樣式改變）：
.outer{
position: relative;
width: 200px;
height: 100px;
border: 3px solid red;
}
p{
position: absolute;/*絕對定位*/
width: 50%;
height: 50%;
border: 1px solid;
}結果：
情況四：直接父元素設定定位，設定其position為relative或absolute或fixed，則p元素以直接父元素確定大小。
css部分：
*{
margin:0;
padding:0;
}
.outer{
width: 200px;
height: 100px;
border: 3px solid red;
}
.inner{
position: relative;
width: 100px;
height: 100px;
border: 2px solid yellow;
}
p{
width: 50%;
height: 50%;
border: 1px solid;
}結果與情況一的結果一樣。
總結：當元素以百分比設定寬高時，該元素是以“最近的已定位的祖先元素”來確定大小的。與元素定位很相似。