【CSS】定位之下尺寸百分比參考對象

最後更新：2017-07-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：type pre 尺寸沒有 css 瀏覽器 logs char meta

先上結論：

子項目沒有設定定位，其尺寸設定百分比參照的對象是該子項目的父級元素；

子項目絕對位置後，其尺寸設定為百分比參考的對象是該子項目設定了定位（這裡的定位包括絕對位置，相對定位和固定定位）的祖先元素（一層一層往上找，直到找到定位的祖先元素停止）。若沒有找到目標，則參照的是瀏覽器視窗。

下面是測試代碼

子項目不設定定位，父元素也不設定定位

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .father{            width: 300px;            height: 300px;            background-color: yellow;                }        .son{            width: 200px;            height: 200px;            background-color: blue;            }        .grandson{            width: 100%;            height: 100px;            background-color: pink;            }    </style></head><body>    <div class="father">        <div class="son">            <div class="grandson">                            </div>        </div>    </div></body></html>

效果如下：

可以看到子項目尺寸參照的是父級元素。

在上面代碼的基礎上，給黃色盒子設定定位：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .father{            width: 300px;            height: 300px;            background-color: yellow;            position: relative;            }        .son{            width: 200px;            height: 200px;            background-color: blue;            }        .grandson{            width: 100%;            height: 100px;            background-color: pink;            }    </style></head><body>    <div class="father">        <div class="son">            <div class="grandson">            </div>        </div>    </div></body></html>

效果如下：

看到和上面結果一樣，說明子項目沒有設定定位，不會理睬設定了定位的祖先元素。

接著在上面的基礎上，給粉色的盒子設定絕對位置：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .father{            width: 300px;            height: 300px;            background-color: yellow;            position: relative;            }        .son{            width: 200px;            height: 200px;            background-color: blue;            }        .grandson{            width: 100%;            height: 100px;            background-color: pink;            position: absolute;            }    </style></head><body>    <div class="father">        <div class="son">            <div class="grandson">                            </div>        </div>    </div></body></html>

效果

看到，子項目（粉色盒子）的寬度和設定了定位的祖先元素（黃色盒子）的寬度一樣。

接著，將祖先元素的定位去掉。代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .father{            width: 300px;            height: 300px;            background-color: yellow;            /*position: relative;    */         //我是去掉的定位        }        .son{            width: 200px;            height: 200px;            background-color: blue;            }        .grandson{            width: 100%;            height: 100px;            background-color: pink;            position: absolute;              }    </style></head><body>    <div class="father">        <div class="son">            <div class="grandson">                            </div>        </div>    </div></body></html>

效果如下：

子項目（粉色盒子）的寬度為瀏覽器的寬度（因為其祖先元素沒有定位）。

上述結論成立。

【CSS】定位之下尺寸百分比參考對象

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More