当position为absolue时候，其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的 。
首先我们必须知道：
1、[百分比的参照][1]：
根据包含块计算百分值（1）元素的margin/padding/left/right/width参照包含块的width来计算；（2）要计算 height /top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 0。
2、[确定包含块][2]：
确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：
（1）如果 position 属性为 static 或 relative ，包含块就是由它的最近的“祖先块元素”（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘（content）组成的。
（2）如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）祖先元素的内边距区的边缘（padding-left + content + padding-right）组成。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
color: orange;
}
div {
position: absolute;
/*box-sizing: border-box; /*加box-sizing: border-box;时的content=（width-border-padding）；未加时的width=content*/*/
width: 400px;
border: 5px solid orange;
padding: 50px;
height: 160px;
background: lightgray;
}
p {
position: absolute; /* 包含块为最近的祖先元素（可能是块也可能不是块元素）的内边距边缘（padding-left + content + padding-right）组成；
width: 50%; /* == (50+400+50)px * 50% = 250px */
height: 25%; /* == (50+160+50)px * 25% = 65px */
margin: 5%; /* == (50+400+50)px * 5% = 25px */
border: 5px solid orange;
padding: 5%; /* == (50+400+50)px * 5% = 25px */
background: pink;
color: green;
}
/*p {
/* 包含块为最近的祖先块元素（只能是块元素）或格式化上下文的内容区的边缘（content）组成；
width: 50%; /* == 400px * 50% = 200px */
height: 25%; /* == 160px * 25% = 40px */
margin: 5%; /* == 400px * 5% = 20px */
border: 5px solid orange;
padding: 5%; /* == 400px * 5% = 20px */
background: pink;
color: green;
}*/
</style>
</head>
<body>
<div>
<p>This is a paragraph!</p>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
先来看效果： 这效果看起来挺炫，但原理并不复杂，能实现一片花瓣动起来，就能实...
Flex布局 Flex 是 Flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大...
直播有一个很重要的互动：点赞。 为了烘托直播间的氛围，直播相对于普通视频或者...
一、常用RAID介绍 磁盘阵列的全名是（Redundant Arrays of Inexpensive Disk，RA...
我们平常会利用float布局来解决IE浏览器CSS的兼容性问题，比如淘宝，就是用float...
前言 IOC（Intelligent Operations Center）——智慧城市智能运营中心就是智慧城...
本文首发公众号「 前端从进阶到入院 」，欢迎关注！ 在知乎看 参与 Vue Conf 202...
yii-log-target - 监控系统异常且多渠道发送异常信息通知(Bark、Chanify、钉钉群...
写给初用Nestj做项目的你(第二篇: 配置gitlab-runner操作gitlab) 如果不想自己搭...
Dreamweaver是一个非常简单易用但又功能强大的 网页制作 软件。但是，它却又一个...
