html - 'em' css 单元如何用于定位元素？

下面是嵌套了div的html代码和一个 p作为最内层的元素，

<!DOCTYPE html>
<html>
    <head>
        <title>How em unit works?</title>
        <link href="style.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <div>
            <div>
                <p> Some text</p>           
            </div>
        </div>
    </body>
</html>

如果样式为，

body{
    font-size: 10px;  /* Default font size is 16 css pixels for body tag*/
}

body > div{
    font-size: 20px;

}

body > div > div{
    font-size: 50px;
}

p{
    font-size: 0.5em;   /*   25 css pixels  */
    width: 6em;         /* 6X50 css pixels  */
    height: 6em;        /* 6X50 css pixels  */  
    padding-right: 3em; /* 3X50 css pixels  */  
    margin-left: 3em;   /* 3X50 css pixels  */  
    background-color: red;
}

然后，段落文本，取 font-size作为0.5 x 50px (最近 parent 的 0.5 倍 font-size )。

我的问题，

body{
    font-size: 10px;  /* Default font size is 16 css pixels for body tag*/
}

body > div{
    font-size: 20px;
    position: relative;

}

body > div > div{
    font-size: 50px;
}

p{
    font-size: 0.5em;   
    width: 6em;         
    height: 6em;        
    padding-right: 3em; 
    margin-left: 3em;   
    background-color: red;
    position: absolute;
}

如果p得到 position: absolute和最外层 div成为position: relative ，那么，em 是如何实现的？ p 的单元行为更改元素？

最佳答案