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

本文轉載自查看原文 2017-07-16 18:52 1537

先上結論：

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

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

下面是測試代碼

子元素不設置定位，父元素也不設置定位

<!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>

效果如下：

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

上述結論成立。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css定位中的百分比 CSS 中的高度百分比 css padding和margin的百分比 css 樣式的百分比 CSS圓環百分比DEMO css百分比參照大總結 css畫百分比圓環 css——內外邊距設置為百分比時的參考值相對定位、絕對定位 top為百分比的問題 css3圓環百分比，菜單欄定位導航